9

我有一个在键入时触发自动完成搜索的搜索字段。我让它在keyup时触发。这在大多数浏览器中都能完美运行，但在 Android 上的 Firefox 中，这不起作用。似乎在键入时未触发 keyup 事件。仅当在 Android 键盘设置中打开单词建议时才会发生这种情况。

我在 Google 搜索中看到自动完成搜索适用于相同的设置，因此显然可以这样做。我想知道怎么做？这是我需要听的特殊事件吗？

此外，我尝试监听事件更改、keydown 和 keypress，但没有触发。

HTML：

<input type="text" id="searchField" 
 autocomplete="off" spellcheck="false" autocorrect="off" />

jQuery 事件绑定：

  $('#searchField').keyup(function (e) {
    var searchValue = $(this).val();
    searchApi._executeAutocomplete(searchValue);
  });

注意：
有时，按键事件被触发，这通常是敲击一个不会导致形成单词的过程的键。这里最明显的是Enter，它总是触发。另一个是Space，它触发是因为没有单词包含空格，因为空格是完成单词的定义。Backspace触发如果删除的最后一个字符不在一个单词中。这意味着如果您刚刚删除了单词的最后一个剩余字母（因此它是字段的开头，或光标后跟一个空格），它就会触发，但如果您在光标仍在的单词末尾删除了一些字符，则不会触发紧接着一封信。基本上，如果按键导致来自键盘应用程序的某种单词建议，则不会触发按键事件。

作为旁注，我可以说在同一设备上的 Chrome 中一切正常。

4

3 回答 3

13

您可以改用该input事件，它在 Android 上的 Firefox 中对我有用。您可以将事件处理程序绑定到input和keyup事件以实现向后兼容性，但在大多数现代浏览器中，这将触发两者：

$('#searchField').bind('input keyup', function(e){
    var searchValue = $(this).val();
    searchApi._executeAutocomplete(searchValue);
});

这里的例子：http: //jsfiddle.net/JQ928/3/

于 2013-08-02T02:22:26.070 回答
0

我在另一个问题的答案中找到了解决方案。问题基本上是“将我动态写入的文本复制到页面的另一部分”。答案是支持通过非键盘操作来捕获更改，例如使用鼠标粘贴文本。它是通过在文本字段中启动一个嗅探器来解决的，该嗅探器检查值是否已使用setInterval(...). 它清除了模糊计时器。

这解决了我的问题，基本上是关键事件没有触发，以及在我找到这个答案之前我没有意识到的“鼠标粘贴”问题......！

这可行，但我不确定我对这个解决方案是否完全满意，因为它使用了嗅探器。无论变化的原因是什么，我都会更喜欢使用某种在价值变化时触发的事件。使用该change事件将不起作用，因为在焦点离开该字段之前不会触发该事件。

于 2013-01-08T09:10:25.770 回答
0

事实上，Android 上的 Firefox 不会触发按键事件，但也会触发某种奇怪的输入事件（例如，如果您按下一个键，则会触发两个事件，如果您离开它也会触发输入事件输入）我必须编写自己的事件：

(function($){
var $event = $.event,
    $special = $event.special.fennecInput = {
        setup: function(){
            $(this).on('input',$special.handler);
        },
        teardown: function(){
            $(this).off('input',$spceial.handler);
        },
        handler: function(event) {
            var context = this,
                args = arguments,
                dispatch = function() {
                    event.type='fennecInput';
                    $event.dispatch.apply(context,args);
                };
            if($(context).val() != $(context).attr('data-fennecInput-oldval')){
                dispatch();
                $(context).attr('data-fennecInput-oldval',$(context).val());
            }
        }
    };
})(jQuery);

仅当发生更改值的输入事件时才会触发此事件，因此它不会执行不必​​要的事件。

于 2015-04-01T10:09:44.803 回答