jquery div 下拉框焦点事件

来源：互联网发布：网络聊天语言编辑：程序博客网时间：2024/06/17 00:39

这章与上一章《jquery input 下拉框(模拟select控件)焦点事件》类似

这章讲述div的焦点事件如何使用

div的焦点事件与input的焦点事件区别在于需要多添加一个属性：tabindex (Safari可能不支持) ; 这个属性是可以让键盘获取到焦点事件，当然，我们只是用这个属性来让div有焦点而已; 为了不改变网页原有的键盘属性; 建议设置成 tabindex = '-1'; tabindex 默认为0,即在网页中按下tab即可触发，第一下tab就触发当前事件;

ps : div还有一个属性 (html5新属性) 可以让其获得焦点，但不建议用在这; contenteditable="true"; 这个属性还有一个特性就是可以让div变成input那样，可编辑特性！

下面是html结构：

  <div class="div-box" tabindex="-1">    <p class="text"><span class="texts">Holle Word</span> <span class="tip"></span></p>    <ul class="dropdown-menu">      <h4>Holle Word</h4>      <hr>      <li>test</li>      <li>dome</li>      <li>标签</li>    </ul>  </div>

css:

    .div-box {      position: relative;      display: inline-block;      outline: 0;    }        .text {      height: 32px;      line-height: 32px;      margin: 0;      padding: 0 6px;      cursor: pointer;    }        .dropdown-menu {      position: absolute;      width: 200px;      color: #FFF;      margin: 0;      padding: 10px;      list-style: none;      border-radius: 10px;      background-color: #555;      -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);      box-shadow: 0 5px 15px rgba(255, 255, 255, .1);    }        .dropdown-menu h4 {      text-align: center;      margin: 10px 0;    }        .dropdown-menu li {      border-bottom: 1px solid #999;      padding: 0 6px;      line-height: 28px;    }        .dropdown-menu li:hover {      background-color: black;      cursor: pointer;    }        .tip {      width: 0;      height: 0;      border-left: 5px solid transparent;      border-right: 5px solid transparent;      border-top: 10px solid #555;      display: inline-block;    }

js:

    var isBox = false; // 定义一个触发焦点事件的开关，默认为不开启状态 || 也可以给input设置一个属性，来判断    $(".dropdown-menu").hide();    $(".div-box").focus(function () { // div绑定焦点事件，触发时打开焦点开关      $(this).find(".dropdown-menu").show();      isBox = true;    })    $(".div-box").mousemove(function () { // 鼠标在div区域内打开焦点开关      isBox = true;    });    $(".div-box").mouseout(function () { // 鼠标在div区域外关闭焦点开关      isBox = false;    });    $(".div-box").blur(function () { // div失去焦点时通过焦点开关状态判断鼠标所在区域      if (isBox == true) return false;      $(this).find(".dropdown-menu").hide();    });    $(".dropdown-menu").find('li').each(function () {       $(this).on("click", function () {        isBox = false;        var text = $(this).text();        $(this).parent().siblings(".text").find(".texts").text(text);        $(this).parent().parent().blur(); // *********  清除焦点事件  (div本身是没焦点的)        $(this).parent().hide();      })    })

这章与上一章《jquery input 下拉框(模拟select控件)焦点事件》大致相同，区别在于tabindex 属性和在点击后需要移除div的焦点事件;

原文链接：http://www.cnblogs.com/ZevEssay/p/5953205.html

0 0