聚焦后输入字段立即模糊 [英] Input field immediately blurs after focus

问题描述

根据此答案，我尝试创建一个页面，在该页面上，如果输入字段被聚焦而不是高度被缩小太小了，页面将无法滚动.如果输入字段失去焦点，那么一切都会恢复到原始状态.

According to this answer I try to create a page where if the input field get focused than the height is scaled down small enough that the page will be not scrollable. If the input field lose the focus than everything is made back to the original state.

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

I tried this technique without events only entering the code through the console and it worked like a charm, but after I bind these to events, everything is ruined. I realized that after I click into the input field and the binded function executes, the input field immediately lose the focus. It logs the bind to the console, but doesn't unwrap() and also doesn't change the scrollLocked's value, so in the next click it wrap() the <div> again and there will be multiple ones.

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

My guess for this behavior is that after the focus the DOM isn't created yet but it immediately blurs and it is executed so fast that it try to unwrap() a DOM element that isn't exist yet. The only pitfall in this theory is that after the second or umpteen click there are a lot of height-helpers but it still doesn't unwrap() any of them.

<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()?有没有办法实现我所描述的?

Why does the input field lose the focus immediately and why the blur's function do not unwrap() even after multiple clicks? Is there a way to achieve what I described?

推荐答案

由于您更改了它在DOM中的位置，因此失去了焦点.您可以通过重新调整焦点，然后使模糊处理程序仅在其辅助div内捕获才能解决此问题.

It loses focus because you changed it's location in the DOM. You can solve this by re-focusing it and then causing the blur handler to only catch when it's within the helper 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/

这篇关于聚焦后输入字段立即模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！