好资源导航 » 文章资讯 » layui--select使用以及下拉框实现键盘选择的例子

layui--select使用以及下拉框实现键盘选择的例子

2023-08-13 16:59:04 68

注意几点：

1.select下拉框一定要放到layui-form类下。这个layui-form不是必须放在form上，放在一个div也是可以的

2.要注意每次formrender之后呢，要重新注册事件。






开始使用layui










输入框

密码框

辅助文字

选择框

北京上海广州深圳杭州

复选框

开关

单选框

文本域

立即提交重置 /***********layui下拉框选择,支持键盘*************/ layui.use('form',function(){ varform=layui.form; var$=layui.$; form.render(); //每次渲染之后手注册事件 $("dl").prev().find("input").attr("onkeydown","listenSelect.up(event,this)"); }); varlistenSelect={ style:"layui-this", up:function(event,thisinput){ varkeyCode=event.keyCode; vardl=$(thisinput).parent().next();//找到渲染后的dl varcurDd=(dl).find('.layui-this'); if(keyCode==40){//按下下键 $(thisinput).parents('.layui-form-select').addClass('layui-form-selected'); curDd=$(dl).find('.layui-this').nextAll(':not(.layui-hide)'); if(curDd.length==0){ //curDd=$(dl).find('dd:first'); curDd=$(dl).find('dd').not(".layui-hide").first(); }else{ curDd=curDd[0]; } }elseif(keyCode==38){ $(thisinput).parents('.layui-form-select').addClass('layui-form-selected'); curDd=$(dl).find('.layui-this').prevAll(':not(.layui-hide)'); if(curDd.length==0){ curDd=$(dl).find('dd').not(".layui-hide").last(); }else{ curDd=curDd[0]; } } dl.find("dd").removeClass(this.style);//移除样式 $(curDd).addClass(this.style); vardd=$(dl).find('.layui-this'); //计算高度--start try{ dd.offset().top-dl.offset().top+dl.scrollTop(); dl.scrollTop( dd.offset().top-dl.offset().top+dl.scrollTop()-100 ); }catch(err){ //console.log(err.stack); } //计算高度--end if(keyCode==13){ $(dd).click(); $(thisinput).focus();//再次得到焦点 $(thisinput).attr("onkeydown","listenSelect.up(event,this)") } returnfalse; } }; /********END*******/

以上这篇layui--select使用以及下拉框实现键盘选择的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

layui--select使用以及下拉框实现键盘选择的例子

热门推荐

随机推荐