Поля ввода HTML не получают Фокус при нажатии

у меня тоже эта проблема. Я использовал disableSelection() метод пользовательского интерфейса jQuery на родительский div, в котором содержатся мои поля ввода. В Chrome поля ввода не были затронуты, но в Firefox входы (а также текстовые области)не были сосредоточены на Щелчке. Странная вещь здесь заключалась в том, что событие click на этих входах работало.

решение было убрать disableSelection() метод для родительского DIV.

Я знаю, что это очень старая нить, но это случилось со мной недавно; мне потребовалось некоторое время, чтобы понять это.

эта же проблема может быть вызвана помещением элементов "input" внутри пары тегов "label".

в моем случае я намеревался создать пару тегов 'div', но вместо этого я случайно создал пару тегов' label', а затем вставил некоторые поля ввода текста ' input type="text"..- с помощью дома.

Он отображается нормально на экране, но когда я щелкнув по любому из текстовых полей, курсор продолжал прыгать обратно к первому "входу" и действительно действовал беспорядочно.

Мне потребовалось некоторое время, чтобы понять это, потому что это поведение тонкое, и совсем не то, что я ожидал бы от такой ошибки.

bsnider

использовать для тега input.

я боролся с той же проблемой некоторое время назад. Я использовал jquery.плагин макета в модальном диалоге jquery-ui, и я не мог получить доступ ни к одному из полей в нем.

это оказалось (часть div был над моими полями ввода, поэтому я не мог щелкнуть их). Вы должны проверить это и попробовать изменить z-index значение полей ввода.

это случается иногда, когда есть несбалансированные <label> теги в форме.

У меня тоже была эта проблема, и в моем случае я обнаружил, что цвет шрифта был тем же цветом фона, поэтому казалось, что ничего не произошло.

Если вы столкнулись с этой проблемой при использовании canvas с DOM на мобильных устройствах, ответ Ashwin G работал для меня отлично, но я сделал это через javascript

var element = document.getElementById("myinputfield");
element.onclick = element.select();

после этого все работало безупречно.

Я прочитал все ответы выше, и некоторые из них направили меня к проблеме, но не к решению проблемы.

основной причиной проблемы является disableSelection(). Это вызывает все проблемы, но удаление его не является решением, как (по крайней мере, в 2016 году или чуть раньше), на устройств с сенсорным экраном, вы "должны" использовать это, если вы хотите иметь возможность перемещать объекты с помощью jQuery.

решение было оставить disableSelection() к сортируемому элементу, но также добавьте действие привязки чуть выше:

 $('#your_selector_id form').bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(event) {
    event.stopImmediatePropagation();
 })

The form в элементе jQuery просто остановить распространение на форме, так как вам может понадобиться распространение на некоторых элементах.

Это может произойти в bootstrap, если вы не размещаете свои столбцы внутри <div class ='row'>. Плавающие столбцы не очищаются, и вы можете получить следующий столбец, перекрывающий предыдущий, поэтому щелчки не будут попадать в элементы dom, где вы ожидаете.

у меня была такая проблема из-за этого кода:

$("#table tbody tr td:first-child").bind("mousedown", function(e){
    e.preventDefault();
    $(this).parents('tr').removeClass('draggable');
});

Я решил его, удалив

e. preventDefault ();

новый код:

$("#table tbody tr td:first-child").bind("mousedown", function(){
    $(this).parents('tr').removeClass('draggable');
});

У меня была аналогичная проблема - не мог понять, в чем причина, но я исправил ее, используя следующий код. Почему-то он не мог сосредоточиться только на пустых входах:

$('input').click(function () {
        var val = $(this).val();
        if (val == "") {
            this.select();
        }
    });

Я использую jQuery UI и Bootstrap поэтому я столкнулся с этой проблемой, и я думаю, что это конфликт между ними, как в обычном случае textarea или входной файл редактируется по своей природе, но я сделал это решение после тестирования всех вышеперечисленных ответов, но никто не решает кроссбраузерная поддержка для всех основных браузеров, но я решил его, и я хотел бы поделиться своим решением вы можете использовать его на ввод текста и textarea

(проверено на Рабочий стол: IE (все версии), Chrome, Safari, Windows Edge, Firefox, Visual Studio Cordova Ripple Viewer на Windows & Visual Studio Cordova Windows 10 Store App)

(протестировано на мобильных устройствах: Chrome, Firefox, Android Internet Browser & Visual Studio Cordova App на Android и Visual Studio Cordova Windows 8 + 8.1 + 10 приложение для телефона)

это HTML Код:

<textarea contenteditable id="textarea"></textarea>

это код CSS:

textarea {
    -webkit-user-select: text !important;
    -khtml-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    /*to make sure that background color and text color is not the same (from the answers above)*/
    background-color:#fff !important;
    color:#733E27 !important;
 }        

Это Код JQuery На Документ Готов

$("textarea").click(function() {
        setTimeout(function(){
            $("textarea").focus();
            //add this if you are using JQuery UI (From The Solutions Above)
            $("textarea").enableSelection();
            var val = $("textarea").val();
            if (val.charAt(val.length-1) !== " " && val.length !== 1) {
                alert(val.length);
                val += " ";
            }
            $("textarea").val(val);
        }, 0);
    });

    if (navigator.userAgent.indexOf('Safari') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
        //alert('Its Safari or chrome');
        $("textarea").onfocus(function(e) {
            setTimeout(function(){
                var end;
                if ($("textarea").val === "") {
                    end = 0;
                } else {
                    end = $("textarea").val.length;
                }
                if ($("textarea").setSelectionRange) {
                    var range = document.getElementById('textarea').createTextRange();
                    if (range) {
                        setTimeout(range, 0, [end, end]);
                    } else { // IE style
                        var aRange = document.getElementById('textarea').createTextRange();
                        aRange.collapse(true);
                        aRange.moveEnd('character', end);
                        aRange.moveStart('character', end);
                        aRange.select();
                    }
                }
                e.preventDefault();
                return false;
            }, 0);
        });
    }

вы можете проверить его на моем веб-приложении в www.gahwehsada.com

когда вы говорите

and nope, they don't have attributes: disabled="disabled" or readonly ;-)

это через просмотр html, исходный код страницы или DOM?

Если вы проверите DOM с помощью Chrome или Firefox, то вы сможете увидеть любые атрибуты, добавленные в поля ввода через javasript, или даже наложение div

на всякий случай, если кто-то еще ищет этот ответ, у нас была аналогичная проблема и мы решили ее, изменив Z-индекс входных тегов. По-видимому, некоторые другие дивы расширились слишком далеко и перекрывали входные окна.

Я просто нашел еще одну возможную причину этой проблемы, некоторые текстовые поля ввода отсутствовали закрытие "/", поэтому у меня было <input ...> когда правильная форма <input ... />. Это исправило все для меня.

в моем случае это было всплывающее окно Bootstrap в открытом состоянии. Ввод текста был в другом всплывающем окне календаря поверх Bootstrap one, вход получил свой фокус обратно после удаления tabindex="-1" атрибут из Bootstrap modal.

У меня была та же проблема. В конце концов я понял это, проверив элемент, и элемент, который я думал, что выбрал, был другим элементом. Когда я это сделал, я обнаружил, что есть скрытый элемент, который имел Z-индекс 9999, как только я исправил, что моя проблема ушла.

У меня была эта проблема более 6 месяцев, это может быть та же проблема. Основной симптом заключается в том, что вы не можете перемещать курсор или выделять текст в текстовых вводах, только клавиши со стрелками позволяют перемещаться в поле ввода. Очень раздражает проблема, особенно для полей ввода textarea. У меня есть этот html, который заполняется 1 из 100 форм через Javascript:

<div class="dialog" id="alert" draggable="true">
    <div id="head" class="dialog_head">
        <img id='icon' src='images/icon.png' height=20 width=20><img id='icon_name' src='images/icon_name.png' height=15><img id='alert_close_button' class='close_button' src='images/close.png'>
    </div>
    <div id="type" class="type"></div>
    <div class='scroll_div'>
        <div id="spinner" class="spinner"></div>
        <div id="msg" class="msg"></div>
        <div id="form" class="form"></div>
    </div>
</div>

по-видимому, 6 месяцев назад я попытался сделать всплывающее окно перетаскиваемым и потерпел неудачу, одновременно нарушая ввод текста время. Как только я удалил draggable="true", он снова работает!

проблема для меня была в том, что я использовал class="modal fade", Я изменил его на class="modal hide". Это решило проблему.

У меня была та же проблема. Рвал на себе волосы часами пробуя всевозможные растворы. Оказалось незамкнутым a тег.Попробуйте проверить свой HTML-код, решение может быть незамкнутым тегом, вызывающим проблемы

У меня была эта проблема с помощью Bootstrap + контактная форма 7. Я по какой-то причине поставил метку в качестве контейнера формы, и это было проблемой для того, чтобы не быть выбранным на мобильном телефоне.

<label>
    <contact form>...</contact form>
</label>

казалось, сломать все входы, кроме первого входа и отправки.

iPhone6 chrome

проблема для меня было размещение поля ввода внутри <label> и <p>

такой :

<label>
  <p>
     <input/>
  </p>
</label>

Я изменил их, чтобы

<div>
  <div>
     <input/>
  </div>
</div>

и это работает для меня .

после проверки этого ответа, пожалуйста, проверьте другие ответы на этой странице, эта проблема может иметь различные причины

У меня была та же проблема, и исправление состояло в том, чтобы удалить заполнители, и я изменил дизайн формы, чтобы использовать метки вместо заполнителей...

Это также произойдет в любое время, когда div оказывается расположенным над элементами управления в другом div; например, используя bootstrap для макета и имея "col-lg-4", за которым следует "col-lg=8" с ошибками... правый потерянный / неправильно названный div покрывает левый и захватывает события мыши. Легко взорвать, что орфографические ошибки, - и = рядом друг с другом на клавиатуре. Итак, платит, чтобы изучить с инспектором и искать "сюрпризы", чтобы раскрыть эти дикие дивы.

есть ли невидимое окно, закрывающее контролирует и блокирует события, и как это может произойти? Оказывается, fatfingering = for-with bootstrap classnames-это один из способов...