当存在 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 中按预期运行(在输入之前没有请求)。

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

我整理了两个例子；损坏并修复。两者之间的唯一区别是占位符属性的存在(在损坏的版本中)。

损坏的浏览器仅在 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 的 native 输入事件在元素焦点上触发。这在 Chrome 上不会发生。所以这可能不是 jquery 的错误，而是 ie 的一个功能。正如您在问题中所述，只有当输入元素具有占位符属性时才会发生这种情况，如果没有该属性，输入事件不会在焦点上触发。

我尝试为焦点添加一个 one 事件处理程序，以便在触发焦点之前调用 preventDefault()，但这仍然导致输入事件触发。

autofocus html5 属性仍然会导致输入事件触发。

我尝试将您的代码包装在正确的 html/head/body 中，但没有效果

最后，作为解决方法

1) 我将 minLength 属性默认为 1

minLength: 1

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

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

这似乎适用于 ie 9。