你的位置:首页 > Java教程

[Java教程]jQuery input 下拉框焦点事件

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

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

 <div class="input-box">  <input type="text" class="input" value="Holle Word" />  <span class="tip-l"></span>  <ul class="dropdown">   <li>Holle Word</li>   <li>这是一个测试</li>   <li>简单的dome</li>  </ul> </div>

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事件;