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始终是相同的结果。请忽略此。
这里的问题是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的错误,而是ie的功能。如您在问题中所述,仅当input元素具有占位符属性,而没有该属性时,input事件才不会在焦点上触发。
我试图添加一个one
事件处理程序以preventDefault()
在触发焦点之前调用焦点,但这仍然导致输入事件触发。
autofocus html5属性也仍然导致输入事件触发。
我尝试将您的代码包装在适当的html / head / body中,但这没有任何效果
最后,作为解决方法
1)我默认将minLength属性设置为1
minLength: 1
2)在setTimeout中,将minLength的选项设置为0
$("#tags").focus().autocomplete("minLength", 0);
这似乎适用于ie 9。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句