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


Posted in Javascript onSeptember 24, 2019

注意几点:

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使用以及下拉框实现键盘选择的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
js倒计时简单实现方法
Dec 17 Javascript
javascript每日必学之继承
Feb 23 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 Javascript
JS防抖和节流实例解析
Sep 24 #Javascript
vue.js实现图书管理功能
Sep 24 #Javascript
layui table单元格事件修改值的方法
Sep 24 #Javascript
Javascript Dom元素获取和添加详解
Sep 24 #Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 #Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 #Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 #Javascript
You might like
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
django model object序列化实例
2020/03/13 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
应聘护士自荐信
2013/10/21 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
优良学风班总结材料
2014/02/08 职场文书
不错的求职信范文
2014/07/20 职场文书
服务明星事迹材料
2014/12/29 职场文书
人民检察院起诉书
2015/05/20 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
素质教育学习心得体会
2016/01/19 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
mysql查找连续出现n次以上的数字
2022/05/11 MySQL