Maintain focus on an input tag

Question

I'm trying to keep focus on an input element with this code:

<input onblur="this.focus()" />

But it doesn't seem to work.

Solution

If we just call .focus() right on blur event, it will restore focus, but actually there will be no text cursor. To handle this we have to let element to lose focus and then return it in few milliseconds. We can use setTimeout() for this.

$('#inp').on('blur',function () { 
    var blurEl = $(this); 
    setTimeout(function() {
        blurEl.focus()
    }, 10);
});

Here's working example. Be careful - you can't leave text field after you enter it =)

EDIT I used jQuery, but it can be easily done without it.
EDIT2 Here's pure JS version fiddle

<input type="text" id="elemID" />

<script type="text/javascript">
    document.getElementById('elemID').onblur = function (event) { 
        var blurEl = this; 
        setTimeout(function() {
            blurEl.focus()
        }, 10);
    };
</script>

Comments

[Jabey]

Thanks, but I also need to be able to click other things. Is it possible?

[Denis O.]

Yes, it is possible. The only thing you have to keep in mind, that after any click it will return focus on input. Perhaps you should code some additional conditions for controlling focus losing prevention.

[Jabey]

How would you do this in plain Javascript? I'm not experienced in jQuery at all.

[Jabey]

One last thing: Could it work like this? <input onblur="setTimeout(this.focus(),10" />

[Denis O.]

@in3D =) almost. you forgot to save element ref to global variable. It should be like this <input type="text" id="inp" onblur="var blurEl = this; setTimeout(function() {blurEl.focus()},10)" /> Vote you up for shortest code, but keep in mind that using inline JS is bad habit.

[Jabey]

What does it mean to "save element ref to global variable?"

[Denis O.]

@in3D, when you are using setTimeout() function, you cannot pass any argument to the function to be called. But in our case we need to let our function to know which element has to be focused. The only way to handle this is to save reference on desired element to the variable in global scope, which will be accessible inside our function, using var globVariableName = this You can read more about variable scope here javascript variable scope

[Jabey]

Oh, so like this: <input onblur="var search=this; setTimeout(search.focus(),10)" />

[Denis O.]

@in3D Exactly! But saying again - inline JS is a bad taste, try to avoid it.

[Jabey]

Thanks again for all the help!

[elledienne]

@coramba i would like to use your code but i need the input to stay always focused except if the user clicks on some defined divs. Can you help me adding this functionality? i tried with some if but without luck :S

[vam]

@in3D For a content editable div, the focus is happening at the start of the textbox, how can it be the same position as it is doing on input