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

克里斯·穆恩奇

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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

jQuery自动完成功能,选择项目时停止焦点

搜索框中的Ajax / jQuery自动完成功能(Shopify)

HTML中的值与占位符属性

删除type = date的html5输入元素中存在的默认文本/占位符

在Symfony2实体字段中添加JQuery自动完成功能

Flask中的jQuery自动完成功能

在jQuery中自动为输入字段添加边框焦点

关闭自动完成功能后,如果保存在浏览器中,为什么仍然填写HTML输入?

jQuery UI自动完成功能从右向左扩展

Internet Explorer中的HTML字段集/ div边框

占位符存在时的jQuery UI Sortable long div奇数

jQuery-ui自动完成功能无法在IE8中正常工作

ASP.NET MVC 4中的jQuery UI自动完成功能不起作用

如何在自动完成功能(jQuery ui)中搜索关键字

jQuery UI自动完成功能立即消失

在内容占位符中使用文本框时,为什么Textbox中的自动完成jQuery不起作用?

当输入包装在div中时,从表单标签创建html5占位符

HTML5占位符在Internet Explorer中被切断

如何在jQuery UI中强制打开自动完成功能

将输入ID传递给jQuery UI自动完成功能中的url

Angular JS和jQuery UI自动完成功能

如何获取jQuery UI自动完成功能以忽略HTML实体

使用jQuery自动完成功能选择属性值和字段值

呈现jQuery自动完成数据中存在的html元素

在jQuery UI自动完成功能中,“响应”功能在哪里实现?

jQuery自动完成功能:如何获取HTML项目的“ id”属性?

jQuery自动完成功能,传递字段自动完成功能的数据属性位于

输入的文本字段在Internet Explorer 8中没有获得视觉焦点

当我使用 jquery-ui 自动完成功能在 textarea 中输入时,如何在任何位置实现自动完成?