layui-select使用以及下拉框实现键盘选择[通俗易懂]

layui–select使用以及下拉框实现键盘选择[通俗易懂]

全栈程序员-站长 • 2022年4月20日下午12:40 • 未分类 • 阅读 47

大家好，又见面了，我是你们的朋友全栈君。

2019独角兽企业重金招聘Python工程师标准>>>

1.select下拉框一定要放到layui-form类下。这个layui-form不是必须放在form上，放在一个div也是可以的

2.要注意每次form render之后呢，要重新注册事件。

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

转载于:https://my.oschina.net/Skynet01/blog/1923890

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/107374.html原文链接：https://javaforall.net