首页 > 代码库 > jQuery input 下拉框焦点事件

jQuery input 下拉框焦点事件

2024-08-16 09:41:50   230人阅读

本章主要讲解如何实现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效果 （仿bootstarp的input效果）：

    .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事件；

 

jQuery input 下拉框焦点事件


联系
我们