我使用JQuery UI创建了一个简单的自动完成控件.我有一个输入字段的默认值,显示"输入您的关键字...".我设置了一个focus()事件,当用户将焦点设置为输入字段进行输入时,该事件将清除输入.
在IE中,当您键入并且菜单显示项目列表时,从菜单项中选择项目时,再次调用focus().这个对focus()的额外调用只发生在IE中.副作用是从文本字段中清除所选菜单项.
通过利用这个autocomplete.focus()事件,我有一个非常原始的解决方案.当用户将鼠标悬停在选定的菜单项上时会触发此事件.在这里,我可以设置一个全局布尔变量,可以用来告诉输入字段上的focus()事件,菜单项是活动的/可见的,因此不清除输入值.当然,这是一个黑客!
这个问题有替代方案(不那么hacky!)吗？
这是代码:
<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和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;
});
})
我们有类似的问题,我相信我们通过return false;在focus方法中添加一个来修复它:
$("#tags").focus(function () {
// clear the input value
$("#tags").val("");
return false;
});
此外,您的focus声明后看起来有一个额外的(尾随)逗号.可能想要清理它.
UPDATE
在jsbin.com中稍微使用了你的代码之后,我想我找到了解决你的IE特定问题的解决方案,但我不是百分之百为什么它只会在IE中死掉.
示例:http://jsbin.com/aqituk/2/edit#javascript,html
区别在于改变了$(function() { ...完整的文档就绪功能,$(document).ready(function() {...
希望这可以帮助!
| 归档时间： |
|
| 查看次数： |
4708 次 |
| 最近记录： |