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继承 Base类的源码解析
Dec 30 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
基于mysql的论坛(6)
2006/10/09 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jQuery.each使用详解
2015/07/07 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
python字典DICT类型合并详解
2017/08/17 Python
Python flask框架post接口调用示例
2019/07/03 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python 线程池用法简单示例
2019/10/02 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
小学生成长感言
2014/01/30 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
学校就业保障协议书
2019/06/24 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android