通过jQuery在文本输入框中选择文本会导致其他元素需要双击而不是单击才能启动?

我有一个jquery函数,所以每当一个 <input type="text"> 元素进入焦点,其中的所有文本都被选中。

$('input[type=text]').focusin(function(e) {
    // Selects all text on text field focus
    $(this).select();

});

到目前为止,一切正常。在页面的其他地方,有一个复选框,通过使用topcoat css库的一些花哨的CSS伪装成切换开关。下面是切换开关的样子。

http:/topcoat.ioswitch

当我点击或用Tab键点击一个文本框时,所有的文本都被选中了,就像预期的那样。然而,如果我再点击切换开关,它就不会启动。我必须双击才能使其工作。它应该只需要一次点击。如果我从文本框中点击到页面的背景上,切换开关就会恢复到只需要一次点击。如果我重新加载页面,不点击任何文本框,切换开关就能正常工作,只需要一次点击。奇怪的是,如果我把 $(this).select(); 行的jQuery函数,toggle开关就会重新正常工作。

这就是HTML的结构。

<div class="section-wrapper">

    <div class="section">
        <div class="trough">
            <label class="topcoat-switch">
                <input type="checkbox" class="topcoat-switch__input">
                <div class="topcoat-switch__toggle"></div>
            </label>
        </div>
    </div>

    <div class="section-contents">
        <!-- Input text fields are in here, buried in some more divs -->
    </div>

</div>

为了更深入地挖掘,我写了一个小函数来跟踪哪些元素在注册点击。

$('div, input').on('click', function(e) {
    console.dir(e.currentTarget);
})

当按预期工作时,在关注任何文本框之前,这就是点击切换开关时鼠标点击传播的样子。

input.topcoat-switch__input
div.trough
div.section
div.section-wrapper
div.container-inner
div.container

需要注册点击的关键元素是输入元素。input.topcoat-switch__input

正如预期的那样,鼠标点击会在最深的元素中注册,并向外传播。然而,当我点击进入一个文本框后,再点击切换开关,鼠标传播栈是这样的。

div.topcoat-switch__toggle
div.trough
div.section
div.section-wrapper
div.container-inner
div.container

输入元素不见踪影,需要双击才能注册。与其说是输入注册了,不如说好像是 div.topcoat-switch__toggle 元素(输入的同级元素)进行注册。

我该怎么做,才能让我在关注文本输入时保留选择所有文本的功能,并修复奇怪的鼠标点击注册行为?

解决方案:

正如Anthony McGrath所指出的,问题在于文本选择输入干扰了用于使切换开关工作的CSS样式。topcoat.io的切换开关样式依靠的是 input: focus, input:activeinput:checked 选择器才能正常工作,而文本的选择会干扰这些选择器。

我通过在每个文本框的focusOut事件中添加一个clearSelection()函数来解决这个问题。我使用的清除选择函数是由Tim Down提供的。

https:/stackoverflow.coma147882862450280

本文来自投稿,不代表实战宝典立场,如若转载,请注明出处:https://www.shizhanbaodian.com/4687.html

(0)
上一篇 2022年5月31日 下午10:00
下一篇 2022年5月31日 下午10:00

相关推荐

发表评论

登录后才能评论