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

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

今天小编就为大家分享一篇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使用以及下拉框实现键盘选择的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS实现视频弹幕效果
这篇文章主要为大家详细介绍了JS实现视频弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
js 判断文件类型并控制表单提交示例代码
判断文件类型控制表单提交这些都是在客户端实现的，下面有个不错的示例，感兴趣的朋友可以参考下
2013-11-11
浅析js封装和作用域
在编写web软件时，遇到一些可以共用js的情况，于是就想着如何封装js代码。基本需求很简单，其实就是根据不同的情况封装js代码
2013-07-07
javascript基于DOM实现省市级联下拉框的方法
这篇文章主要介绍了javascript基于DOM实现省市级联下拉框的方法,可实现选择省份后出现对应城市下拉框选项的功能,非常具有实用价值,需要的朋友可以参考下
2015-05-05
使用Echart实现绘制立体的柱状图
EChart开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。本文将利用EChart绘制立体的柱状图，感兴趣的可以学习一下
2022-03-03
JavaScript隐式类型转换
JavaScript的数据类型是非常弱的（不然不会叫它做弱类型语言了）！在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加
2016-03-03
一个用js实现控制台控件的代码
一个用js实现控制台控件的代码...
2007-09-09
javascript闭包功能与用法实例分析
这篇文章主要介绍了javascript闭包功能与用法,结合具体实例形式深入浅出的分析了javascript中闭包的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
2017-04-04
用JavaScript实现简单网页时钟
这篇文章主要为大家详细介绍了用JavaScript实现简单网页时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
layer.alert回调函数执行关闭弹窗的实例
今天小编就为大家分享一篇layer.alert回调函数执行关闭弹窗的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具