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不会读取字段中的内容，因为我使用的是虚拟键盘 - 没有keydown事件！

实际代码比这个大得多，实际上我们的需求实际上是一个功能齐全的键盘，所以我不想切换到接近终点线的其他输入法。

如果有一种方法可以使得typeahead能够注册输入字段中的任何内容并且仍然可以在屏幕点击中运行，或者在我的keyboard.js中模拟按键事件，这将是非常棒的。我愿意为typeahead或我的代码添加一些内容。

非常感谢您的建议！

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

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

1 个答案: