前端之家收集整理的这篇文章主要介绍了
jQuery实现输入框聚焦,键盘上下键选择城市,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_
403_0@在最近有个项目中 需要实现当文本框聚焦的时候,可以
键盘上下键选择
内容,按enter键的时候,把
内容传到输入框中,如图所示:
@H_
403_0@
@H_
403_0@实现
代码如下:
@H_
301_9@
/**
*输入框聚焦,键盘上下键选择城市
*/
;(function($){
$.fn.inputKey=(options){
var settings=$.extend({
'focusID':'#city2',//聚焦的输入框ID或class
'slideBox':'.FdestinationBox',1)">内容容器Div
'current':'current',1)">li有选中状态的class名
'dataCity':'data-city'li上的属性 如:<li data-city="北京"></li>
},options);
return this.each((){
var number = 0;
var $focusDiv = $(settings.focusID);
var $slideBox = $(settings.slideBox);
var $slideBoxLi = $slideBox.find('li');
var sizeLength = $slideBox.find('li').size();
$focusDiv.focus((){
sizeLength = $slideBox.find('li').size();
$slideBoxLi.removeClass(settings.current);初始化current状态
$slideBox.css({'display':'block'});
});
if(window.addEventListener){
$focusDiv[0].addEventListener("input",1)"> () {
number = 0;
sizeLength = $slideBox.find('li').size();
$slideBoxLi.removeClass(settings.current);
$slideBoxLi.eq(0).addClass(settings.current);
});
}else{
$focusDiv[0].attachEvent("input",1)">).addClass(settings.current);
});
}
$focusDiv.on('keyup',1)">(e){
console.log(sizeLength);
e=window.event||e;
if(e.keyCode==38){
if(number>0){
number--;
}{
number=sizeLength-1;
}
$slideBoxLi.removeClass(settings.current);
$slideBoxLi.eq(number).addClass(settings.current);
}
else if(e.keyCode==40if(sizeLength-1 > number){
number++{
number=0;
}
$slideBoxLi.removeClass(settings.current);
$slideBoxLi.eq(number).addClass(settings.current);
}
if(e.keyCode==13var dataCity = $slideBoxLi.eq(number).attr(settings.dataCity);
$focusDiv.val(dataCity);
$slideBox.fadeOut();
$focusDiv.blur();
$slideBoxLi.removeClass(settings.current);
}
});
$slideBoxLi.hover((){
number=$(this).index();
$slideBoxLi.removeClass(settings.current);
$().addClass(settings.current);
});
$('body').on('click',$slideBoxLi,1)">(e){
e.preventDefault();
$slideBoxLi.eq(number).attr(settings.dataCity);
$focusDiv.val(dataCity);
number=0;
});
});
}
})(jQuery);