为了比 <select>
更好的设计,我正在制作自己的组合框标签。
顺便说一下,我想知道如何使用键盘的箭头键在 <span>
之间进行导航。 (或其他 <p>
...),并使用“tab”键显示建议。喜欢 <option>
的 <select>
标签。
这是我想让它工作的地方:
HTML
<input type="text" id="myInput" value=""/>
<div id="myDiv">
<span>Value 1</span>
<span>Value 2</span>
<span>Value 3</span>
</div>
CSS
#myDiv {display:none;border:1px solid #000;}
span {display:block;background:#EDEDED;cursor:pointer;}
span:hover {background:#555;color:#FFF;}
JS
$(document).ready(function(){
$('#myInput').focus(function(){
$('#myDiv').slideDown();
});
$('span').click(function(){
$('#myInput').val($(this).html());
$('#myDiv').slideUp();
});
});
您可以在这里进行测试:http://jsfiddle.net/eHpKX/2/
编辑示例:例如,在输入中单击或制表,然后使用箭头键导航...它不起作用。
我们将不胜感激。
最佳答案
我为 uparrow
和 downarrow
编写了一个 keydown 处理程序,就像选择下拉菜单一样。但是 tab
键在跳出下一个字段时有特定的作用,所以我不想 prevtDefault
浏览器行为。请参阅下面的代码,您可以从那里构建更多内容,
CSS:
span.active {background:#555;color:#FFF;}
JS:
$(document).ready(function() {
$('#myInput').focus(function() {
if ($('#myDiv span.active').length == 0) {
$('#myDiv span:first').addClass('active');
}
$('#myDiv').slideDown();
}).focusout(function() {
$('#myDiv').slideUp();
});
$('span').click(function() {
$('#myInput').val($(this).html());
}).mouseenter(function() {
$('#myDiv span').removeClass('active');
}).keydown(function(e) {
alert(e.which);
});
//keydown event
$('#myInput').keydown(function(e) {
var $actvOpt = $('#myDiv span.active');
if (e.which == 13) { //enter key
if ($actvOpt.length != 0) {
$(this).val($actvOpt.text());
$('#myDiv').slideUp();
}
return;
}
var actvIndex = $actvOpt.removeClass('active').index();
var optCount = $('#myDiv span').length;
if (e.which == 40) { //keydown
actvIndex += 1;
} else if (e.which == 38) { //keydown
actvIndex -= 1;
}
if (actvIndex < 0) actvIndex = optCount - 1;
else if (actvIndex >= optCount) actvIndex = 0;
$('#myDiv span:eq(' + actvIndex + ')').addClass('active');
$actvOpt = $('#myDiv span.active');
$(this).val($actvOpt.text());
});
});
关于javascript - 如何用方向键在 <span> 之间实现导航?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10146015/