问题

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.

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.

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.

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;
});

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?

回答1:

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/

来源：https://stackoverflow.com/questions/19661772/input-field-immediately-blurs-after-focus

标签

javascript