Невозможно установить фокус на вводе Typeahead Twitter Bootstrap

Когда я удаляю эти атрибуты:

data-source="<?=str_replace('"', '&quot;', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>" data-items="4" data-provide="typeahead"

Я могу выполнить это:

$(document).ready(function() {
    $('.first').focus();
});

Это моя HTML-разметка для этого:

<div class="itemx">
    <input type="text" class="input-large first" autocomplete="off" placeholder="Equipment Name/Label" name="equip[]" data-source="<?=str_replace('"', '&quot;', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>" data-items="4" data-provide="typeahead" />
    <input type="text" class="input-large second" placeholder="Quantity" name="quant[]" />
</div>

ПРИМЕЧАНИЕ. Typeahead работает хорошо, и в этом нет ничего плохого:

data-source="<?=str_replace('"', '&quot;', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>"

javascript focus jquery twitter-bootstrap bootstrap-typeahead
person Community    schedule 29.11.2012    source источник

Ответы (9)


arrow_upward
8
arrow_downward

У меня недавно была эта проблема. Это исправилось, когда я сначала объявил блок кода .typeahead(), а затем сделал фокус поля. Если бы я изменил порядок, функциональность .typeahead() сломалась.

$('#myField').typeahead({
    ...
});

$('#myField').focus();
person Nicholas Pappas    schedule 11.04.2013
comment
+1 Это работает. Использование html5 <input ... autofocus> тоже работает. - person Martin Wickman; 06.05.2013
comment
Никогда. Я повторяю, НИКОГДА не используйте атрибут автофокуса для элемента ввода с вводом текста. Он будет работать везде, но не на iPhone. И вы буквально выдернете себе волосы! - person Abhishek; 29.06.2017

arrow_upward
8
arrow_downward

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

var typeaheadReference = $('.typeahead').typeahead({ ... };

тогда вы просто позвоните typeaheadReference.focus();

person Hayk Hovhannisyan    schedule 21.05.2014

arrow_upward
4
arrow_downward

Не спрашивайте меня, почему, но это единственное, что сработало для меня:

setTimeout("$('[name=search_input]').focus();", 0)
person thouliha    schedule 09.04.2015
comment
Старый ответ, но до сегодняшнего дня (02/2020) я не нашел веских аргументов, почему это так работает: b - person Michel Xavier; 06.02.2020

arrow_upward
2
arrow_downward

Typeahead активно блокирует событие фокуса по умолчанию. Я не уверен, почему (возможно, есть вариант использования, когда фокус прерывается, я этого не видел).

В исходнике typeahead.js (в конце строки с 316 по 321):

  $(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
    var $this = $(this)
    if ($this.data('typeahead')) return
    e.preventDefault()
    $this.typeahead($this.data())
  })

Изменить на:

  $(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
    var $this = $(this)
    if ($this.data('typeahead')) return true
    $this.typeahead($this.data())
  })

Возврат true позволяет завершить событие фокуса (выполняется только после первого фокуса, когда установлен ввод), а удаление вызова e.preventDefault() позволяет фокусу срабатывать при начальной настройке.

У меня есть запрос на внесение изменений для изменения — ответ будет обновлен с ответом авторов.

person RealBlueSky    schedule 30.01.2013

arrow_upward
1
arrow_downward

Это зависит от того, какую версию вы используете, я столкнулся с этой проблемой в 0.9.3.

Не самый чистый, но можно попробовать поставить таймаут:

setTimeout(function(){ $('.first').focus(); }, 0);

person lmerino    schedule 24.02.2014

arrow_upward
1
arrow_downward

Используя typeahead.js 0.10.2, решение, указанное Evil Closet Monkey почти, сработало для меня. Как указано, вы должны установить фокус после вызова «typeahead», но имейте в виду, что вызов «typeahead» будет манипулировать DOM и добавлять дополнительные элементы. После вызова «typeahead» найдите элемент, представляющий ваше поле ввода, и установите на него фокус. Как показано ниже, входному элементу назначен класс «tt-input».

Пример:

HTML:

<div id="levelSearchBox" style="clear: both">
    <input class="typeahead" type="text" placeholder="Search" data-bind="value: selectedRootLevel" />
</div>

js:

    $('#levelSearchBox .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 0,
        autoselect: true
    }, {
        displayKey: 'name',
        source: levels.ttAdapter()
    }).on('typeahead:selected', function ($e, datum) {
        selectedCallBack(datum["name"]);
    });

    $('#levelSearchBox .tt-input').focus();
person Marius    schedule 08.05.2014

arrow_upward
0
arrow_downward

Возможно вход скрыт.

$('input:visible').focus();
person robert    schedule 29.11.2012

arrow_upward
0
arrow_downward

Я создал jsfiddle, чтобы люди могли быстро протестировать версию библиотеки http://jsfiddle.net/uryUP/.

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

$('#locationSearchText').typeahead({
            minLength: 1,
            highlight: true
        },
        {
            source: function (query, process) {
                return process([{value:'abcdefg'}]);
            }
        });

$('#locationSearchText').focus().typeahead('val', 'abc');
person David Lee    schedule 02.07.2014

arrow_upward
0
arrow_downward

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

person formatjam    schedule 11.08.2015