layui--select使用以及下拉框實現(xiàn)鍵盤選擇的例子

更新時間：2019年09月24日 14:27:49 作者：mangrandi

今天小編就為大家分享一篇layui--select使用以及下拉框實現(xiàn)鍵盤選擇的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

注意幾點：

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="發(fā)呆">
 </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使用以及下拉框實現(xiàn)鍵盤選擇的例子就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: