javascript - 浏览器焦点转换的问题

问题描述

问 题

在做一个输入框...目标是让其有折叠效果...

整个输入框是父级
弹出的部分是子
遇到的问题是: 切换标题.内容.勾选.下拉菜单的时候这个框的动画都会走一遍
就是比如我点击图一输入框,图二正常弹出
但是当我输入标题之后切换到内容,这个输入框会先折叠为图一,再展开

代码:
监听处理:

//that里面保存有输入框里面的所有DOM节点
var easyPostFocusIn = function(that) {
  return function(e) {
    console.log('trigger focus in' + e.target);
    e.stopPropagation();
    $('#postController').show('fast');
    that.title.placeholder = '标题';
  }
};

var easyPostFocusOut = function(that) {
  return function(e) {
    console.log('trigger focus out' + e.target);
    e.stopPropagation();
    //想法是如果当前的焦点元素在that对象里面,就说明焦点还在输入框内,结果不行
    if(!that.hasOwnProperty(document.activeElement)) {
      console.log(document.activeElement);//这个地方永远打印body...
      $('#postController').hide('fast');
      that.title.placeholder = '发一个新帖吧';
    }
  }
};

添加监听:

//easyPost输入框的最外层组件
easyPost.addEventListener('focusin', easyPostFocusIn(self));
easyPost.addEventListener('focusout', easyPostFocusOut(self));

DOM:(jade模板...)

  input#title.form-control(placeholder='发一个新帖吧')
  div#postController(style='margin-bottom: 5px;')
    textarea#content.form-control(placeholder='内容' style='margin-top: 5px;')
    label(style='margin-left: 10px;')
      input#onlyM(type='checkbox')
      span  仅发到我的个人专栏
    select#parents.form-control(style='display: inline-block; width: auto;')
      option 选择一个学院
    select#children.form-control(style='display: inline-block; width: auto;')
      option 选择一个专业
    select.form-control#lang(style='display: inline-block; width: auto;')
     option bbcode
     option markdown
     option plain
     option html
    input#parseURL(type='checkbox' checked)
    span  处理URL
    a.btn.btn-primary#post(href='javascript:;' style='float: right;') 发布
  hr.hrNarrowSpace

代码是用jquery还混杂了一些其他库. 所以代码比较多..还有业务逻辑..所以没帖全
大家帮忙看看.需要补充我再帖

添加了注释,

解决方案

我提供一个解决方案吧。

hide();的时候使用setTimeout做隐藏，300毫秒差不多吧
show()的时候先cleartimeout弄死。

这篇关于javascript - 浏览器焦点转换的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！