当存在html 5占位符属性时,在Internet Explorer中的字段焦点上触发jQuery UI自动完成

Question

HTML:

<input type="text" name="item" value="" id="item" class="input-xlarge" placeholder="Enter item name or scan barcode" accesskey="i"  />

使用Javascript:

    $( "#item" ).autocomplete({
        source: '<?php echo site_url("sales/item_search"); ?>',
        delay: 10,
        autoFocus: false,
        minLength: 0,
        select: function(event, ui)
        {
            event.preventDefault();
            $( "#item" ).val(ui.item.value);
            $('#add_item_form').ajaxSubmit({target: "#register_container", beforeSubmit: salesBeforeSubmit, success: itemScannedSuccess});
        }
    });

setTimeout(function(){$('#item').focus();}, 10);

当页面在Internet Explorer中加载时,自动完成会发生一个空的术语值,从而导致一堆结果.如果我删除占位符属性,它将按预期运行,并且在键入发生之前不会发出请求.

如果我删除焦点事件,它也适用于Internet Explorer.但我需要关注页面加载,所以这不是一个真正的选择.我还想保留占位符文本.

该元素在safari,firefox和chrome中按预期运行(在键入之前没有请求).

这是一个错误吗？有没有解决方法,所以我可以使用占位符属性？

我把两个例子放在一起; 破碎和固定.2之间的唯一区别是占位符属性的存在(在损坏的版本中).

破坏的只在IE中中断,并在其他浏览器中按预期运行.

注意:通过破碎我的意思是当聚焦在字段上时,自动完成功能会被激活.

http://blastohosting.com/jquery_ui_autocomplete_bug/broken.html

http://blastohosting.com/jquery_ui_autocomplete_bug/working.html

注意:在这两个示例中,ajax始终是相同的结果.请忽略这一点.

Answer 1

这里的问题是Internet Explorer处理输入事件的方式.在输入元素(标记)的输入事件上触发自动完成菜单. https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js第167行

如果将此代码放在setTimeout之前

document.getElementById('tags').addEventListener('input',function(ev){alert(ev.target.value);},false);

您将看到ie的本机输入事件是在元素的焦点上触发的.这不会发生在chrome上.所以它可能不是jquery的bug,而是ie的一个特性.正如您在问题中所述,这只发生在input元素具有占位符属性而没有属性的情况下,输入事件不会在焦点上触发.

我试图在触发焦点之前one为焦点添加一个事件处理程序preventDefault(),但仍然导致输入事件触发.

自动对焦html5属性仍然导致输入事件触发.

我尝试用适当的html/head/body包装你的代码但是没有效果

最后,作为一种解决方法

1)我将minLength属性默认为1

minLength: 1

2)在setTimeout中,我将minLength的选项设置为0

$("#tags").focus().autocomplete("minLength", 0);

这似乎适用于即9.