焦点后输入字段立即模糊

时间:2013-10-29 14:59:10

标签: javascript jquery html focus blur

根据this answer我尝试创建一个页面,如果输入字段聚焦,则高度缩小到足以使页面不可滚动。如果输入字段失去焦点,则所有内容都恢复到原始状态。

我尝试了这种技术,没有事件只通过控制台输入代码,它就像一个魅力,但在我将它们绑定到事件后,一切都毁了。我意识到在点击输入字段并执行绑定功能后,输入字段立即失去焦点。它会将bind记录到控制台,但不会unwrap(),也不会更改scrollLocked的值,因此在下次点击wrap() { {1}}再次,会有多个。

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

Live Demo

HTML

unwrap()

的JavaScript / jQuery的

<input type="text" id="search-text">
<div id="spacer" style="height:1500px;"></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' }) ); } }); $(document).on('blur', '#search-text', function(){ console.log('blur'); $('#height-helper').contents().unwrap(); scrollLocked = false; }); ?有没有办法实现我所描述的目标?

1 个答案:

答案 0 :(得分:4)

因为你改变了它在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/