layui--select使用以及下拉框?qū)崿F(xiàn)鍵盤選擇的例子

注意幾點(diǎn)：

創(chuàng)新新互聯(lián)，憑借十余年的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，本著真心·誠(chéng)心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計(jì)網(wǎng)站有上千家案例。做網(wǎng)站建設(shè)，選創(chuàng)新互聯(lián)公司。

1.select下拉框一定要放到layui-form類下。這個(gè)layui-form不是必須放在form上，放在一個(gè)div也是可以的

2.要注意每次form render之后呢，要重新注冊(cè)事件。

<!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="請(qǐng)輸入標(biāo)題" 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="請(qǐng)輸入密碼" 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">復(fù)選框</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">開關(guān)</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="請(qǐng)輸入內(nèi)容" 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();
 //每次渲染之后手注冊(cè)事件
 $("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');
 
 
  // 計(jì)算高度--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);
  }
  // 計(jì)算高度--end
 
  if(keyCode == 13){
   $(dd).click();
   $(thisinput).focus(); // 再次得到焦點(diǎn)
   $(thisinput).attr("onkeydown","listenSelect.up(event,this)")
  }
  return false;
 }
};
 
/********END*******/
 
</script>
</body>
</html>

以上這篇layui--select使用以及下拉框?qū)崿F(xiàn)鍵盤選擇的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站名稱：layui--select使用以及下拉框?qū)崿F(xiàn)鍵盤選擇的例子
轉(zhuǎn)載來源：http://bm7419.com/article36/jcedsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、、App開發(fā)、小程序開發(fā)、網(wǎng)站策劃、品牌網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容