Поля ввода HTML не получают фокус при нажатии
У меня проблема, и я не могу понять, что именно вызывает такое поведение. Я не могу получить доступ к своим полям ввода и textareas в моей форме HTML.
К сожалению, JS, HTML и CSS очень большие, поэтому я не могу опубликовать все это здесь.
Кто-нибудь может сказать мне, что искать при отладке этого странного поведения?
ОБНОВИТЬ
Если я наведу курсор на input В поле я вижу текстовый курсор, но когда я нажимаю на него, поле не получает фокус. Я могу получить доступ к полю, нажав клавишу Tab, и если я щелкну по нему правой кнопкой мыши и затем щелкните по полю, я также получу фокус для него.
... и нет, у них нет disabled или же readonly атрибуты;-)
30 ответов
когда я нажимаю на него, поле не получает фокус. я могу получить доступ к полю, нажав клавишу "Tab"
Похоже, вы отменили действие по умолчанию для события mousedown. Найдите в вашем HTML и JS обработчики onmousedown и найдите строку с надписью.
return false;
Эта линия может помешать вам сфокусироваться, нажав.
Re: ваш комментарий, я полагаю, вы не можете редактировать код, который добавляет этот обработчик? Если вы можете, самое простое решение состоит в том, чтобы просто удалить return false; заявление.
Есть ли способ просто добавить функциональность в триггер события, не перезаписывая его?
Это зависит от того, как обработчик подключен. Если он прикреплен с использованием традиционного метода регистрации, например element.onmousedown, то вы можете создать для него оболочку:
var oldFunc = element.onmousedown;
element.onmousedown = function (evt) {
oldFunc.call(this, evt || window.event);
}
Поскольку эта "оболочка" не возвращает false, она не отменяет действие по умолчанию (фокусирование) для элемента. Если ваше событие прикреплено с использованием расширенного метода регистрации, такого как addEventListener или attachEvent, тогда вы можете удалить только обработчик события, используя имя / ссылку функции, и повторно присоединить его с помощью функции- оболочки, аналогичной описанной выше. Если добавлена анонимная функция, и вы не можете получить ссылку на нее, то единственным решением будет присоединить другой обработчик события и вручную сфокусировать элемент, используя метод element.focus().
У меня тоже была эта пробема. Я использовал disableSelection() метод jQuery UI на родительском DIV, который содержит мои поля ввода. В Chrome поля ввода не были затронуты, но в Firefox входы (и текстовые области также) не фокусировались на щелчках. Странная вещь была в том, что событие click на этих входах работало.
Решение состояло в том, чтобы удалить disableSelection() метод для родительского DIV.
Использовать onclick="this.select()" атрибут для входного тега.
Я знаю, что это очень старая тема, но это недавно произошло со мной; Мне понадобилось время, чтобы понять это.
Эта же проблема может быть вызвана помещением элементов input внутри пары тегов label.
В моем случае я намеревался создать пару тегов 'div', но вместо этого я случайно создал пару тегов 'label', а затем вставил некоторые поля ввода текста 'input type="text"..', используя DOM.
Он нормально отображался на экране, но когда я нажимал на любое из текстовых полей, курсор продолжал возвращаться к первому "вводу" и действительно действовал с ошибками.
Мне потребовалось некоторое время, чтобы понять это, потому что это поведение тонкое, и совсем не то, что я бы ожидал от такого рода ошибок.
bsnider
Я боролся с той же проблемой некоторое время назад. Я использовал плагин jquery.layout в модальном диалоговом окне jquery-ui, и я не мог получить доступ ни к одному из полей в нем.
Оказалось, что это z-index проблема (некоторые div был над моими полями ввода, поэтому я не мог щелкнуть их). Вы должны проверить это и попробовать изменить z-index значение ваших полей ввода.
Это иногда случается, когда есть неуравновешенный <label> теги в форме.
Это может произойти в начальной загрузке, если вы не размещаете столбцы внутри <div class ='row'>, Плавающие столбцы не очищаются, и вы можете получить следующий столбец, перекрывающий предыдущий, следовательно, щелчки не попадут в элементы dom там, где вы ожидаете.
Я прочитал все ответы выше, и некоторые из них направили меня к проблеме, но не к решению проблемы.
Коренная причина проблемы disableSelection(), Это вызывает все проблемы, но их устранение не является решением, поскольку (по крайней мере, в 2016 году или немного раньше) на устройствах с сенсорным экраном вам "придется" использовать это, если вы хотите иметь возможность перемещать объекты с помощью jQuery.,
Решение было оставить disableSelection() к сортируемому элементу, но также добавьте обязательное действие чуть выше:
$('#your_selector_id form').bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(event) {
event.stopImmediatePropagation();
})
form в элементе jQuery просто остановить распространение на форме, так как вам может потребоваться распространение на некоторых элементах.
У меня тоже была эта проблема, и в моем случае я обнаружил, что цвет шрифта был того же цвета, что и фон, поэтому казалось, что ничего не произошло.
Если вы столкнулись с этой проблемой при использовании canvas с DOM на мобильных устройствах, ответ Ashwin G работал у меня отлично, но я сделал это через javascript
var element = document.getElementById("myinputfield");
element.onclick = element.select();
После все заработало без нареканий.
Для всех, кто использует Electron
Для всех, у кого есть эта проблема с Electron, проблема для меня заключалась в использовании до выбора полей ввода. По всей видимости
alert а также
confirmне полностью поддерживаются Electron и поэтому могут испортить поля ввода. Если вы все еще хотите их использовать, обратитесь к этому сообщению: /questions/43197112/podskazhite-na-elektron/43197123#43197123
У меня была похожая проблема - я не мог понять, в чем причина, но я исправил ее, используя следующий код. Каким-то образом он не мог сфокусировать только пустые данные:
$('input').click(function () {
var val = $(this).val();
if (val == "") {
this.select();
}
});
У меня была эта проблема более 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", он снова работает!
Стоит добавить, что наличие собственности
pointer-events:none на вашей метке ввода также вызовет это нежелательное поведение.
На всякий случай, если кто-то ищет этот ответ, у нас была похожая проблема, и мы решили ее, изменив z-индекс входных тегов. По-видимому, некоторые другие div'ы зашли слишком далеко и перекрывали поля ввода.
Я использую JQuery UI и Bootstrap, поэтому столкнулся с этой проблемой, и я думаю, что это конфликт между ними, так как в обычном случае текстовая область или поле ввода редактируются по своей природе, но я принял это решение после тестирования всех приведенных выше ответов, но ни одного решить кросс-браузерную поддержку для всех основных браузеров, но я решил это, и я хотел бы поделиться своим решением, вы можете использовать его для ввода текста и текстовой области
(Проверено на настольном компьютере: IE (все версии), Chrome, Safari, Windows Edge, Firefox, Visual Studio Cordova Ripple Viewer в Windows и Visual Studio Cordova Windows 10 Store App)
(Проверено на мобильных устройствах: Chrome, Firefox, интернет-браузер Android и приложение Visual Studio Cordova для Android и Visual Studio Cordova для Windows 8 + 8.1 + 10 Phone Phone)
Это код 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);
});
}
Вы можете проверить это в моем веб-приложении на http://www.gahwehsada.com/
У меня была эта проблема из-за этого кода:
$("#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 type="text" id="your_name" name="your_name">
<label for="your_name">Your Name</label>
<input type="text" id="your_email" name="your_name">
<label for="your_name">Your Name</label>
Я пытался обновить
for attribute во второй этикетке
your_email вместо того
your_name и это работает для меня
<label for="your_email">Your Name</label>
Когда ты сказал
and nope, they don't have attributes: disabled="disabled" or readonly ;-)
Это происходит через просмотр вашего html, исходного кода страницы или DOM?
Если вы проверяете DOM с помощью Chrome или Firefox, то вы сможете увидеть любые атрибуты, добавленные в поля ввода через javasript или даже с наложенным div
iPhone6 хром
Для меня проблемой было размещение поля ввода внутри <label> а также <p>
как это:
<label>
<p>
<input/>
</p>
</label>
Я изменил их на
<div>
<div>
<input/>
</div>
</div>
И это работает для меня.
После проверки этого ответа, пожалуйста, проверьте другие ответы на этой странице, эта проблема может иметь различные причины
В моем случае это было всплывающее окно Bootstrap в открытом состоянии. Ввод текста был в другом всплывающем календаре поверх Bootstrap, ввод был восстановлен после удаления tabindex="-1" атрибут из Bootstrap модальный.
Я просто нашел другую возможную причину этой проблемы, некоторые входные текстовые поля пропускали закрывающий "/", поэтому я имел <input ...> когда правильная форма <input ... />, Это исправило это для меня.
У меня была эта проблема, вызванная своего рода перекрытием div элемент с начальной загрузкой class ="row" над "братом" div элемент с class="col"первый скрыл фокус второго div элемент.
Я решил взять внешнюю div row элемент с этого уровня дерева div и таким образом перебалансировать логическую иерархию начальной загрузки на основе row а также col классы.
У меня была эта проблема с использованием Bootstrap + контактная форма 7. Я по какой-то причине я поместил метку в качестве контейнера формы, и это было проблемой, так как ее нельзя было выбрать на мобильном устройстве.
<label>
<contact form>...</contact form>
</label>
Казалось, сломать все входы, кроме первого ввода и отправки.
У меня была такая же проблема только сейчас в React.
Я разобрался, что в Router, Route. Мы не можем этого сделать, поскольку это вызывает проблему закрытия мобильной клавиатуры.
<Route
path = "some-path"
component = {props => <MyComponent />}
/>
Обязательно используйте рендер вместо этого в этой ситуации
<Route
path = "some-path"
render = {props => <MyComponent />}
/>
Надеюсь, это кому-то поможет
Даниэль
У меня такая же проблема. В конце концов я понял это, осмотрев элемент, и элемент, который, как мне показалось, был выбран, был другим элементом. Когда я это сделал, я обнаружил, что был скрытый элемент с z-индексом 9999, как только я исправил, что моя проблема ушла.
У меня была та же проблема, и исправление было удалить заполнители, и я изменил дизайн формы, чтобы использовать метки вместо заполнителей...
Проблема для меня заключалась в том, что я использовал class="modal fade"Я изменил это для class="modal hide", Это решило проблему.
Это также произойдет всякий раз, когда div заканчивается позицией над элементами управления в другом div; например, использование начальной загрузки для макета и наличие "col-lg-4" с последующей орфографической ошибкой "col-lg=8"... правый осиротевший / ошибочно названный div покрывает левый и фиксирует события мыши. Легкий удар по этой орфографии, - и = рядом друг с другом на клавиатуре. Таким образом, стоит проверить с инспектором и искать "сюрпризы", чтобы раскрыть эти дикие дивы.
Есть ли невидимое окно, охватывающее элементы управления и блокирующие события, и как это может произойти? Оказывается, fatfingering = for - с именами загрузочных классов это один из способов...
У меня такая же проблема. В течение нескольких часов рвал на себе волосы, пробуя всевозможные решения. Оказалось, что это не закрытый тег. Попробуйте проверить HTML-код, решение может быть открытым тегом, вызывающим проблемы.