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

У мене проблема, і я не можу зрозуміти, що саме спричиняє таку поведінку. Я не можу отримати доступ до своїх полів введення та textareaслів у моїй формі HTML.

На жаль, JS, HTML та CSS дуже великі, тому я не можу все це розмістити тут.

Хтось може сказати мені, на що слід звертати увагу при налагодженні цієї дивної поведінки?

ОНОВЛЕННЯ

Якщо я навожу курсор на inputполе, я бачу текстовий курсор, але коли я натискаю його, поле не отримує фокусу. Я можу отримати доступ до поля натисканням Tabклавіші, і якщо клацнути правою кнопкою миші, а потім клацнути поле, я також отримую фокус на ньому.

... і ні, вони не мають атрибутів disabledабо readonly;-)

коли я натискаю його, поле не отримує фокус. я можу отримати доступ до поля, натиснувши "клавішу табуляції"

Схоже, ви скасували дію за замовчуванням для події Mousedown . Шукайте у своєму HTML та JS обробники, які ввійшли в систему, і шукайте рядок, який читає.

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 входи (і текстові області також) не зосереджувались на натисканні. Тут дивно було те, що подія кліку на цих входах спрацювала.

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

Я знаю, що це дуже стара нитка, але це зі мною трапилося нещодавно; мені знадобився час, щоб це зрозуміти.

Цю саму проблему може спричинити розміщення елементів 'input' всередині пари тегів 'label'.

У моєму випадку я мав намір створити пару тегів 'div', але натомість випадково створив пару тегів 'label', а потім вставив деякі поля введення тексту 'input type = "text" ..' за допомогою DOM.

Він нормально відображався на екрані, але коли я натискав будь-яке з текстових полів, курсор продовжував переходити назад до першого "вводу" і дійсно діяв нестабільно.

Мені знадобився час, щоб зрозуміти це, оскільки така поведінка є тонкою, і зовсім не такою, як я очікував би від такої помилки.

бснідер

Використовуйте onclick="this.select()"атрибут для вхідного тегу.

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

Це виявилося z-indexпроблемою (деякі divбули над моїми полями введення, тому я не міг їх натиснути). Вам слід перевірити це та спробувати змінити z-indexзначення полів введення.

Це трапляється іноді, коли <label>у формі є незбалансовані теги.

У мене теж була ця проблема, і в моєму випадку я виявив, що колір шрифту однаковий з кольором тла, тому, здавалося, нічого не сталося.

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

Якщо ви зіткнулися з цією проблемою під час використання полотна з 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();
 })

Елемент formjQuery просто зупиняє розповсюдження на формі, оскільки вам може знадобитися поширення на деяких елементах.

У мене була подібна проблема - я не міг зрозуміти, в чому причина, але я виправив це за допомогою наступного коду. Якось це не могло зосередити лише порожні входи:

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

У мене була ця проблема через цей код:

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

Я використовую користувальницький інтерфейс JQuery та 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 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

Коли ти скажеш

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

Це через перегляд вашого html, вихідного коду сторінки або DOM?

Якщо ви перевірите DOM за допомогою Chrome або Firefox, ви зможете побачити будь-які атрибути, додані в поля введення через javasript, або навіть накладений div

На той випадок, якщо хтось інший шукає цю відповідь, ми мали подібну проблему і вирішили її, змінивши z-індекс вхідних тегів. Очевидно, деякі інші divs надто розширились і перекривали поля введення.

У мене ця проблема була більше 6 місяців, можливо, це та сама проблема. Основний симптом полягає в тому, що ви не можете переміщати курсор або виділяти текст під час введення тексту, лише клавіші зі стрілками дозволяють переміщатися в полі введення. Дуже дратує проблема, особливо для полів введення тексту. У мене є цей 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", він знову працює!

Я просто знайшов ще одну можливу причину цієї проблеми, у деяких вхідних текстових полях відсутнє закриття "/", тому я мав, <input ...>коли правильно вказана форма <input ... />. Це мені це виправило.

У моєму випадку це було спливаюче меню Bootstrap у відкритому стані. Введення тексту було в іншому спливаючому вікні календаря поверх Bootstrap, вхід отримав фокус назад після видалення tabindex="-1"атрибута з модального Bootstrap.

iPhone6 ​​хром

Проблемою для мене було розміщення поля введення всередині <label>і<p>

подобається це :

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

Я змінив їх на

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

І це працює для мене.

Перевіривши цю відповідь, перевірте інші відповіді на цій сторінці, у цього питання можуть бути різні причини

Це також трапляється щоразу, коли div закінчується розташуванням над елементами управління в іншому div; як використання завантажувального репліка для макетування та наявність помилки "col-lg-4", за якою слідує помилка "col-lg = 8" ... правий осиротілий / неправильно названий div охоплює лівий та фіксує події миші. Легко підірвати цю орфографічну помилку - і = поруч один з одним на клавіатурі. Отож, платить оглянути інспектора та шукати „сюрпризів”, щоб розкрити ці дикі div.

Чи є невидиме вікно, що охоплює елементи керування та блокування подій, і як це може статися? Виявляється, fatfingering = for - з іменами класів bootstrap це один із способів ...

У мене була та сама проблема. Врешті-решт я зрозумів це, перевіривши елемент, і елемент, який, на мою думку, я вибрав, був іншим елементом. Коли я це зробив, виявив, що є прихований елемент із z-індексом 9999, одного разу я вирішив, що моя проблема зникла.

проблема для мене полягала в тому, що я використовував class="modal fade", я змінив його на class="modal hide". Це вирішило проблему.

У мене була та сама проблема. Рвала моє волосся годинами, пробуючи всілякі рішення. Виявилося, що це не закритий тег. Спробуйте перевірити свій HTML-код, рішенням може бути незакритий тег, що спричиняє проблеми

У мене виникла проблема за допомогою Bootstrap + контактної форми 7. Я чомусь поставив ярлик як контейнер форми, і це було проблемою через те, що його не можна було вибрати на мобільному.

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

Здається, розбиває всі входи, крім першого введення та подання.

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

У мене ця проблема виникла через своєрідне перекриття divелемента із завантажувальним елементом class ="row"над divелементом "брат" з class="col", перший приховав фокус другогоdiv елемента.

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

У мене була така сама проблема щойно в React.

Я зрозумів, що в маршрутизаторі, маршруті. Ми не можемо цього зробити, оскільки це спричиняє проблему закриття мобільної клавіатури.

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

Обов’язково використовуйте візуалізацію в цій ситуації

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

Сподіваюся, це комусь допомагає

Даніель