使用 typeahead.js 的屏幕键盘模拟 KeyPress

Question

我正在为移动原型创建一个触摸友好的屏幕键盘。我们没有使用任何默认设备键盘，而是使用自定义屏幕键盘（出于研究原因，这是不可避免的），它使用以下代码填充输入字段：

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 能够注册输入字段中的任何内容并且仍然可以在屏幕点击时起作用，或者有一种方法可以在我的 keyboard.js 中模拟按键事件，那将是非常棒的。我愿意在预输入或我的代码中添加一些内容。

您的建议将不胜感激！

Answer 1

您可以使用var text = $('.typeahead').typeahead('val'); 获取输入中的当前值，使用$('.typeahead').typeahead('val', 'updated-text'); 设置输入。这也会自动触发下拉菜单。

这是一个reference

所以你的方法可以看起来像这样

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);
};