Выбор текста в поле ввода текста через jQuery заставляет другие элементы требовать двойного щелчка вместо одного щелчка для запуска?

Question

У меня есть функция jquery, поэтому, когда в фокусе появляется элемент <input type="text">, выделяется весь текст внутри него.

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

});

Пока все хорошо. В другом месте на странице есть флажок, замаскированный под тумблеры через какой-то причудливый CSS с использованием библиотеки topcoat css. Вот как выглядит тумблер:

http://topcoat.io/switch/

Когда я щелкаю или вкладываю текстовое поле, весь текст выделяется, как и ожидалось. Однако, если я затем нажму на тумблер, он не сработает. Я должен дважды щелкнуть, чтобы это заработало. Требуется только один клик. Если я щелкну из текстового поля на фоне страницы, тумблер вернется к необходимости только одного щелчка. Если я перезагружаю страницу и не нажимаю на какие-либо текстовые поля, тумблер работает правильно, требуя только одного щелчка. Как ни странно, если я уберу строку $(this).select(); из функции jQuery, тумблер снова будет работать правильно.

Это структура 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 (родственный элемент входа).

Что я могу сделать, чтобы сделать так, чтобы я мог сохранить функциональность выделения всего текста при фокусировке на вводе текста и исправить странное поведение при регистрации щелчком мыши?

Answer 1

Как указал Энтони МакГрат, проблема заключалась в том, что ввод выбора текста мешал стилю CSS, который использовался для работы тумблера. Стиль переключателя topcoat.io использует селекторы input: focus, input:active и input:checked для правильной работы, и выбор текста мешает этим селекторам.

Я решил это, добавив Функция clearSelection () для события focusOut каждого текстового поля. Функция очистки выбора, которую я использовал, была предоставлена ​​Тимом Дауном:

{ ссылка }