[英]jquery-ui autocomplete prevent tab key focus
发布回答我自己的问题:
我有以下HTML:
<select id="genre-select">
<option value="-1">Make a selection</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input id="band-input" type="text" />
<button id="go-button">Go</button>
<button>Unrelated Button</button>
我正在使用jquery-ui自动完成对象,我的原始javascript如下所示:
var bandValue = "-1";
var $genreSelect = $("#genre-select");
var $bandInput = $("#band-input");
var $goButton = $("#go-button");
var bands = [
{
value: "1",
label: "AC/DC",
desc: "..."
},
{
value: "2",
label: "Black Sabbath",
desc: "Ozzy Osbourne, Tony Iommi, Bill Ward, etc."
},
{
value: "3",
label: "Cars, The",
desc: "..."
}
];
$bandInput.autocomplete({
source: bands,
focus: function( event, ui ) {
$bandInput.val( ui.item.label );
return false;
},
select: function( event, ui ) {
console.log("select event");
bandValue = ui.item.value;
$bandInput.val(ui.item.label);
return false;
}
});
它起作用了,但是当使用键盘导航并按TAB时,焦点将跳到“无关按钮”,而不是预期的“开始”按钮。 我试图吞噬所有按键和单击事件,并完全控制$ goButton何时获得焦点,但没有任何效果。
经过大量的故障排除后,该解决方案实际上非常简单。 如果autocomplete.select事件来自TAB,我只需跳过对$ goButton.focus()的调用,并允许常规事件来完成它的工作。
$bandInput.autocomplete({
source: bands,
focus: function( event, ui ) {
$bandInput.val( ui.item.label );
return false;
},
select: function( event, ui ) {
bandValue = ui.item.value;
$bandInput.val(ui.item.label);
if(event.which != null){
if(event.which != 9){
//it's not a tab, so focus
$goButton.focus();
}
else {
//already going to focus, so don't create race condition
}
}
return false;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.