1.select下拉框一定要放到layui-form类下。这个layui-form不是必须放在form上，放在一个div也是可以的
2.要注意每次form render之后呢，要重新注册事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用layui</title> <link href="https://www.jb51.net/article/layui/css/layui.css" > </head> <body> <form action=""> <div> <label>输入框</label> <div> <input type="text" required lay-verify="required" placeholder="请输入标题" autocomplete="off"> </div> </div> <div> <label>密码框</label> <div> <input type="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"> </div> <div>辅助文字</div> </div> <div> <label>选择框</label> <div> <select lay-verify="required" lay-search> <option value=""></option> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> <option value="4">杭州</option> </select> </div> </div> <div> <label>复选框</label> <div> <input type="checkbox" title="写作"> <input type="checkbox" title="阅读" checked> <input type="checkbox" title="发呆"> </div> </div> <div> <label>开关</label> <div> <input type="checkbox" lay-skin="switch"> </div> </div> <div> <label>单选框</label> <div> <input type="radio" value="男" title="男"> <input type="radio" value="女" title="女" checked> </div> </div> <div> <label>文本域</label> <div> <textarea placeholder="请输入内容"></textarea> </div> </div> <div> <div> <button lay-submit lay-filter="formDemo">立即提交</button> <button type="reset">重置</button> </div> </div> </form> <script src="https://www.jb51.net/article/layui/layui.js"></script> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> /***********layui下拉框选择,支持键盘*************/ layui.use('form', function(){ var form = layui.form; var $ = layui.$; form.render(); //每次渲染之后手注册事件 $("dl").prev().find("input").attr("onkeydown","listenSelect.up(event,this)"); }); var listenSelect = { style:"layui-this", up:function (event,thisinput) { var keyCode = event.keyCode; var dl = $(thisinput).parent().next(); //找到渲染后的dl var curDd =(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]; } }else if(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); var dd = $(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)") } return false; } }; /********END*******/ </script> </body> </html>
以上这篇layui--select使用以及下拉框实现键盘选择的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: