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

注意几点：

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

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>开始使用layui</title>
 <link rel="stylesheet" href="./layui/css/layui.css" rel="external nofollow" >
</head>
<body>
 
 
 
 
 
<form class="layui-form" action="">
 <div class="layui-form-item">
 <label class="layui-form-label">输入框</label>
 <div class="layui-input-block">
  <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label">密码框</label>
 <div class="layui-input-inline">
  <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
 </div>
 <div class="layui-form-mid layui-word-aux">辅助文字</div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label">选择框</label>
 <div class="layui-input-block">
  <select name="city" 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 class="layui-form-item">
 <label class="layui-form-label">复选框</label>
 <div class="layui-input-block">
  <input type="checkbox" name="like[write]" title="写作">
  <input type="checkbox" name="like[read]" title="阅读" checked>
  <input type="checkbox" name="like[dai]" title="发呆">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label">开关</label>
 <div class="layui-input-block">
  <input type="checkbox" name="switch" lay-skin="switch">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label">单选框</label>
 <div class="layui-input-block">
  <input type="radio" name="sex" value="男" title="男">
  <input type="radio" name="sex" value="女" title="女" checked>
 </div>
 </div>
 <div class="layui-form-item layui-form-text">
 <label class="layui-form-label">文本域</label>
 <div class="layui-input-block">
  <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
 </div>
 </div>
 <div class="layui-form-item">
 <div class="layui-input-block">
  <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
 </div>
 </div>
</form>
 
 
 
<script src="./layui/layui.js"></script>
<script type="text/javascript" src="http://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使用以及下拉框实现键盘选择的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

基础教程