当启用单词建议时,关键事件在Android上的Firefox中不会触发

时间:2013-01-07 10:42:00

标签: javascript android jquery html firefox

我有一个搜索字段,可在键入时触发自动完成搜索。我有它在键盘上触发。这在大多数浏览器中都能很好地工作,但在Android上的Firefox中,这不起作用。在键入时似乎没有触发keyup事件。只有在Android键盘设置中启用了单词建议时才会出现这种情况。

我在谷歌搜索中看到自动完成搜索在那里进行相同的设置,因此显然可以这样做。我好奇怎么样?这是一个特殊的事件我需要听这个工作吗?

此外,我试图听取事件更改,keydown和按键,但没有触发。

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在同一设备上的一切正常。

3 个答案:

答案 0 :(得分:12)

您可以使用input事件,这对我在Android上的Firefox中有用。 您可以将事件处理程序绑定到inputkeyup事件以实现向后兼容,但在大多数现代浏览器中,这将触发两者:

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

此处示例: http://jsfiddle.net/JQ928/3/

答案 1 :(得分:0)

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

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

这有效,但我不确定我对此解决方案完全满意,因为它使用了嗅探器。无论变化的原因是什么,我都会更乐意使用某种因价值变化而触发的事件。使用change事件将无效,因为在焦点离开该字段之前不会触发。

答案 2 :(得分:0)

通过Android上的Firefox不会触发键事件,但也触发输入事件有点奇怪,(如果你按一个键两个事件被触发,它也会触发输入-event如果你离开输入)我必须写自己的事件:

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

只有在发生改变值的输入事件时才会触发此事件,因此它不会执行不必​​要的事件。