jquery input 下拉框(模拟select控件)焦点事件

未结 0 3557
VIP1 2019年09月20日
悬赏:20积分

本章主要讲解如何实现select下拉列表可输入效果

input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构:

css效果 :

   .input-box {
     position: relative;
     display: inline-block;
   }
   
   .input-box input {
     background-color: transparent;
     background-image: none;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
     color: #555;
     display: block;
     font-size: 14px;
     line-height: 1.42857;
     padding: 6px 6px;
     transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
     width: 200px;
     display: inline;
     position: relative;
     z-index: 1;
   }
   
   .tip-l {
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 10px solid #555;
     display: inline-block;
     right: 10px;
     z-index: 0;
     position: absolute;
     top: 12px;
   }
   
   .dropdown {
     position: absolute;
     top: 32px;
     left: 0px;
     width: 212px;
     background-color: #FFF;
     border: 1px solid #23a8ce;
     border-top: 0;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
     z-index: 999;
     padding: 0;
     margin: 0;
   }
   
   .dropdown li {
     display: block;
     line-height: 1.42857;
     padding: 0 6px;
     min-height: 1.2em;
     cursor: pointer;
   }
   
   .dropdown li:hover {
     background-color: #23a8ce;
     color: #FFF;
   }



关键点js:


  var isBox = false; // 定义一个触发焦点事件的开关,默认为不开启状态 || 也可以给input设置一个属性,来判断
   $(".dropdown").hide();

   $(".input").focus(function () { // input绑定焦点事件,触发时打开焦点开关
     $(this).siblings(".dropdown").show();
     isBox = true;
   });
   $(".input-box").mousemove(function () { // 鼠标进入input-box区域内打开焦点开关
     isBox = true;
   });
   $(".input-box").mouseout(function () { // 鼠标离开input-box区域内关闭焦点开关
     isBox = false;
   });
   $(".input").blur(function () { // input失去焦点时通过焦点开关状态判断鼠标所在区域
     if (isBox == true) return false;
     $(this).siblings(".dropdown").hide();
   });
   $(".dropdown").find('li').each(function () { // 传值给input,同时关闭焦点开关
     $(this).on("click", function () {
       isBox = false;
       var text = $(this).text();
       $(this).parent().siblings(".input").val(text);
       $(this).siblings(".dropdown").hide();
     })
   })

通过以上JS 应该能够明白了,通过鼠标的mousemove事件和mouseout事件来判断鼠标位置,利用focus和blur来做点击事件;

单靠click是无法判断鼠标的状态,如果给body绑定click事件,那么,实际上点击input也会触发body的click事件,而input也会触发本身事件,等于触发两次click事件;

回帖
  • 还没有人回复
本周热议
没有相关数据
layui

微信扫码关注 网盟开源 公众号