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

Solution 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/