Имитация KeyPress с экранной клавиатурой для typeahead.js

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

HTML:

<input id="tags" class="typeahead" type="text" placeholder="Enter keyword">

<ul id="keyboard">
   <li class="letter">1</li>
   <li class="letter">2</li>
   <li class="letter">3</li>
   <li class="letter">4</li>
   <li class="letter">5</li>
   <li class="letter">6</li>
   <li class="letter">7</li>
   <li class="letter">8</li>
   <li class="letter">9</li>
</ul>

JQuery:

var $write = $('#tags');
$('#keyboard li').click(function(press){
    var $this = $(this),
        character = $this.html();
    $write.val($write.val() + character);
};

Это отлично работало на нашем планшетном устройстве, пока я не захотел добавить функциональность typeahead.js, чтобы мы могли заполнять предложения из нашей базы данных. К сожалению, typeahead.js не читает то, что находится в поле, пока не будет нажата клавиша, а поскольку я использую виртуальную клавиатуру, событий нажатия клавиш нет!

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

Если есть способ сделать так, чтобы typeahead мог регистрировать все, что находится в поле ввода, и по-прежнему работать при касаниях экрана, или способ имитировать событие нажатия клавиши в моей клавиатуре.js, это было бы здорово. Я готов добавить что-то в ввод текста или в свой код.

Ваш совет будет очень ценен!


jquery typeahead custom-controls jquery-mobile on-screen-keyboard
person Jacob Krajewski    schedule 21.05.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать var text = $('.typeahead').typeahead('val'); для получения текущего значения на входе и $('.typeahead').typeahead('val', 'updated-text'); для установки входа. Что также автоматически вызовет раскрывающийся список.

Вот ссылка

Итак, ваш метод может выглядеть примерно так

var $write = $('#tags'); // assuming that this is typeahead instance
$('#keyboard li').click(function(press){
    var $this = $(this),
        character = $this.html();
    var updatedText = $write.typeahead('val') + character;
    $write.typeahead('val', updatedText);
};
person Dhiraj    schedule 23.05.2015