【问题标题】：Input field immediately blurs after focus输入字段在焦点后立即模糊
【发布时间】：2013-11-08 19:37:25
【问题描述】：

根据this answer，我尝试创建一个页面，如果输入字段获得焦点，则高度会缩小到足够小以至于页面无法滚动。如果输入字段失去焦点，那么所有内容都会恢复到原始状态。

我在没有事件的情况下尝试了这种技术，只通过控制台输入代码，它就像一个魅力，但在我将这些绑定到事件之后，一切都被毁了。我意识到，当我点击输入字段并执行绑定函数后，输入字段立即失去焦点。它将bind 记录到控制台，但不会unwrap() 也不会更改scrollLocked 的值，因此在下一次单击wrap() <div> 时，将有多个那些。

我对这种行为的猜测是，在焦点之后，DOM 尚未创建，但它立即变得模糊，并且执行得如此之快，以至于它尝试unwrap() 一个尚不存在的 DOM 元素。这个理论的唯一缺陷是，在第二次或无数次点击之后，会有很多 height-helpers，但仍然没有 unwrap() 任何一个。

Live Demo

HTML

<input type="text" id="search-text">
<div id="spacer" style="height:1500px;"></div>

JavaScript/jQuery

var scrollLocked = false;

$(document).on('focus', '#search-text', function(){
    if (!scrollLocked){
        scrollLocked = true;
        $('body').wrapInner(
            $('<div id="height-helper"/>').css({
                height: 300,
                overflow: 'hidden'
            })
        );
    }
});

$(document).on('blur', '#search-text', function(){
    console.log('blur');
    $('#height-helper').contents().unwrap();
    scrollLocked = false;
});

为什么输入框会立即失去焦点，为什么即使多次点击，模糊的功能也没有unwrap()？有没有办法实现我所描述的？

【问题讨论】：

它失去焦点是因为你在 DOM 中移动它。

标签： javascript jquery html focus blur

【解决方案1】：

它失去焦点是因为你改变了它在 DOM 中的位置。您可以通过重新聚焦来解决此问题，然后使模糊处理程序仅在它位于辅助 div 内时才捕获。

var scrollLocked = false;

$(document).on('focus', '#search-text', function(){
    if (!scrollLocked){
        scrollLocked = true;
        $('body').wrapInner(
            $('<div id="height-helper"/>').css({
                height: 300,
                overflow: 'hidden'
            })
        );
        $(this).focus(); // *** Modified ***
    }
});

$(document).on('blur', '#height-helper #search-text', function(){ // *** Modified ***
    console.log('blur');
    $('#height-helper').contents().unwrap();
    scrollLocked = false;
});

http://jsfiddle.net/Tentonaxe/XGRhZ/1/

【讨论】：