码迷,mamicode.com
首页 > Web开发 > 详细

jQuery input 下拉框焦点事件

时间:2016-10-12 16:48:11      阅读:965      评论:0      收藏:0      [点我收藏+]

标签:

本章主要讲解如何实现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 下拉框焦点事件

标签:

原文地址:http://www.cnblogs.com/ZevEssay/p/5950220.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!