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

最新推荐文章于 2025-07-10 17:20:02 发布

mangrandi

最新推荐文章于 2025-07-10 17:20:02 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/mangrandi/article/details/80031382

layui 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了layui框架中表单元素的使用方法，包括输入框、密码框、选择框、复选框、开关、单选框及文本域等，并通过实例展示了如何实现下拉框的选择与键盘操作的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意几点：

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">
</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>