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

Ответ 1

когда я нажимаю на него, поле не получает фокуса. я могу получить доступ к полю, нажав клавишу "tab-key"

Похоже, вы отменили действие по умолчанию для события mousedown. Найдите через HTML и JS для обработчиков onmousedown и найдите строку, которая читает.

return false;

Эта строка может перестать фокусироваться, щелкнув.

Re: ваш комментарий, я предполагаю, что вы не можете редактировать код, который добавляет этот обработчик? Если вы можете, самое простое решение - просто удалить оператор return false;.

Есть ли способ добавить функциональность к event-trigger, не перезаписывая его?

Это зависит от того, как привязывается обработчик. Если он применяется с использованием традиционного метода регистрации, например, element.onmousedown, тогда вы можете создать для него обертку:

var oldFunc = element.onmousedown;
element.onmousedown = function (evt) {
    oldFunc.call(this, evt || window.event);
}

Так как эта "обертка" не возвращает false, она не отменяет действие по умолчанию (фокусировку) для элемента. Если ваше событие подключено с использованием расширенного метода регистрации, такого как addEventListener или attachEvent, вы можете удалить обработчик событий только с помощью имени/ссылки функции и снова подключить его с помощью завернутой функции, аналогичной описанной выше. Если это анонимная функция, которая добавлена, и вы не можете получить ссылку на нее, единственным решением будет присоединение другого обработчика событий и сфокусировать элемент вручную с помощью метода element.focus().

Ответ 2

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

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

Ответ 3

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

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

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

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

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

bsnider

Ответ 4

Используйте атрибут onclick="this.select()" для тега ввода.

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

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

Ответ 9

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

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

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

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

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

$("#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');
});

Ответ 13

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

(Протестировано на рабочем столе: IE (все версии), Chrome, Safari, Windows Edge, Firefox, Visual Studio Кордова Ripple Viewer в Windows и Visual Studio Кордова Windows 10 Store App)

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

Это 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

Ответ 14

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

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

Это через просмотр вашего html, исходного кода страницы или DOM?

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

Ответ 15

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

Ответ 16

У меня была эта проблема более 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", он снова работает!

Ответ 17

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

Ответ 18

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

Ответ 19

iPhone6 ​​хром

Проблема для меня заключалась в помещении входного поля внутри <label> и <p>

вот так:

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

Я изменил их на

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

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

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

Ответ 20

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

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

Ответ 21

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

Ответ 22

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

Ответ 23

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

Ответ 24

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

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

Предположим, что все входные данные, кроме первого ввода, будут отправлены и отправлены.

Ответ 25

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

Ответ 26

У меня была эта проблема, вызванная неким перекрытием элемента div с начальной загрузкой class ="row" над элементом "brother" div с class="col", первый скрыл фокус второго элемента div.

Я решил убрать внешний элемент div row с этого уровня дерева div и перебалансировать логическую иерархию начальной загрузки на основе классов row и col.

Ответ 27

У меня была такая же проблема только сейчас в React.

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

<Route 
 path = "some-path"
 component = {props => <MyComponent />}
 />

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

<Route 
 path = "some-path"
 render = {props => <MyComponent />}
 />

Надеюсь, это поможет кому-то

Даниил