[英]how to stop navigation inside text box using keyboard up and down key while navigating in the suggestion
我有一个文本框,在单击或键入的单词类型上,用户会看到一些建议,问题是当建议可见时,并使用文本框内的上/下键导航到该建议
下面是代码:
<label>when</label>
<div class="fl">
<input class="date-field startdate cornerall" type="text"/>
<div class="input-wrapper">
<input type="text" class="starttime cornerall" placeholder="Add a Time?"/>
<div class="dropdown stsugstn hidden">
<ul class="result cornerall">
<li class="sugactive">11.05</li>
<li>11.05</li>
<li>11.05</li>
<li>11.05</li>
<li>11.05</li>
</ul>
</div>
</div>
<a href="#" class="timezone title-tip" title="IST">GMT+5:30</a>
<a href="#" class="endtimeln">End Time?</a>
</div>
各自的jQuery:
$('.cnewrap').on({
keyup: function(e){
var $this = $(this);
var $vl = $this.val();
var $st = $this.parent().find('.stsugstn');
var key = (e.keyCode ? e.keyCode : e.which);
if($vl != null && $vl.length > 0){
if($st.hasClass( "hidden" )){
$st.removeClass('hidden');
}
if (key === 38 || key === 40){
//TODO write code to stop navigation inside text box
//$this.val($vl);
}
}else{
if(!$st.hasClass( "hidden" )){
$st.addClass('hidden');
}
}
},
click: function(e){
var $this = $(this);
var $vl = $this.val();
var $st = $this.parent().find('.stsugstn');
if($vl != null && $vl.length > 0 && $st.hasClass( "hidden" )){
$st.removeClass('hidden');
}
}
},'.starttime');
jQuery在建议之间导航:
$(window).on('keyup', function(e){
var $stsugstn = $('.stsugstn');
var $etsugstn = $('.etsugstn');
var $next = '';
var key = (e.keyCode ? e.keyCode : e.which);
if($stsugstn!= null && $stsugstn.length > 0 && !$stsugstn.hasClass( "hidden" )){
var $current = $('.stsugstn ul li.sugactive');
if (key === 38){
if($current.is(':first-child')){
$next = $('.stsugstn ul li:last-child');
}else{
$next = $current.prev();
}
}
if (key === 40){
if($current.is(':last-child')){
$next = $('.stsugstn ul li:first-child');
}else{
$next = $current.next();
}
}
if ($next.length > 0) {
$current.removeClass('sugactive');
$next.addClass('sugactive');
}
}
if($etsugstn!= null && $etsugstn.length > 0 && !$etsugstn.hasClass( "hidden" )){
var $current = $('.etsugstn ul li.sugactive');
if (key === 38){
if($current.is(':first-child')){
$next = $('.etsugstn ul li:last-child');
}else{
$next = $current.prev();
}
}
if (key === 40){
if($current.is(':last-child')){
$next = $('.etsugstn ul li:first-child');
}else{
$next = $current.next();
}
}
if ($next.length > 0) {
$current.removeClass('sugactive');
$next.addClass('sugactive');
}
}
});
请建议我如何停止浏览文本框,同时按照jsfiddle的建议使用上/下键在内部建议中导航,这是链接http://jsfiddle.net/Brg9t/
在keydown
触发事件,这是因为浏览器的行为已经在keyup
完成,当时的preventDefault
或return false
无效。
因此,将keyup
更改为keydown
,然后在// todo部分添加return false
。 请参阅http://jsfiddle.net/Brg9t/1/此处的小提琴。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.