JQuery UI Autocomplete focus()在Internet Explorer中意外调用 [英] JQuery UI Autocomplete focus() being called unexpectedly in Internet Explorer
问题描述
我已经使用JQuery UI创建了一个简单的自动完成控件.输入字段的默认值为输入您的关键字...".我已经设置了一个 focus()事件，当用户将焦点设置为要输入的输入字段时，该事件将清除输入.
I've created a simple auto-complete control using JQuery UI. I have a default value for the input field that reads "Enter your keywords...". I've set up a focus() event that will clear the input when a user sets the focus to the input field to being typing.
在IE中，当您键入内容并且菜单显示项目列表时，再次从菜单项中选择项目 focus().对 focus()的额外调用仅在IE中发生.副作用是从文本字段中清除了选定的菜单项.
In IE when you being typing and the menu displays a list of items, when picking an item from the menu item focus() is called again. This extra call to focus() only happens in IE. The side effect is that the selected menu item is cleared from the text field.
通过使用autocomplete.focus()事件，我对此有一个非常原始的解决方案.当用户将鼠标悬停在所选菜单项上时，将触发此事件.在这里，我可以设置一个全局布尔变量，该变量可用于告诉输入字段上的focus()事件菜单项处于活动/可见状态，因此不清除输入值.当然，这是黑客！
I have a very primitive solution to this by making use of the autocomplete.focus() event. This event is fired when the user hovers over a selected menu item. Here I can set a global boolean variable that can be used to tell the focus() event on the input field that the menu item is active/visible and thus not to clear the input value. This is a hack, of course!
是否有其他解决方案(hacky！少了)?
Is there an alternative (less hacky!) solution to this problem?
这是代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Autocomplete demo</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags,
focus: function (event, ui) {
// This event fires when an item from the menu is selected (in focus)
// set some variable here to tell the focus() call to the text field not to clear the value from the input field
},
});
$("#tags").focus(function () {
// clear the input value
$("#tags").val("");
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" value="Enter your keywords..." />
</div>
</div>
</body>
</html>
更新
在对该解决方案稍加调整后，并在提供的答案的帮助下，此方法现在在IE 8和IE 8中均有效. 9.
UPDATE
With the slight tweak to this solution and with help from the provided answer this now works in IE 8 & 9.
$(document).ready(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags
});
$("#tags").focus(function () {
// clear the input value
$("#tags").val("");
return false;
});
})
推荐答案
我们遇到了类似的问题，我相信我们通过在focus方法中添加return false;来解决此问题:
We had a similar issue and I believe we fixed it by adding a return false; to the focus method:
$("#tags").focus(function () {
// clear the input value
$("#tags").val("");
return false;
});
此外，您在focus声明之后似乎还有一个多余的(结尾)逗号.可能想清理它.
Also, it looked like you had an extra (trailing) comma after your focus declaration. Might want to clean that up.
更新
在jsbin.com上处理了一些代码之后，我想我找到了解决IE特定问题的解决方案，但是对于它为什么仅在IE中消失的原因，我不是100％的.
After playing around with your code a bit in jsbin.com, I think I found the solution to your specific issue with IE, but I'm not 100% on why it only dies in IE.
示例: http://jsbin.com/aqituk/2/edit#javascript， html
区别在于将$(function() { ...更改为完整文档就绪功能$(document).ready(function() {...
The difference was changing the $(function() { ... to the full document ready function, $(document).ready(function() {...
希望这会有所帮助！
这篇关于JQuery UI Autocomplete focus()在Internet Explorer中意外调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
