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.

"it doesn't seem to work" is a rather poor description of a problem. Can you be more descriptive of the aspect that doesn't work? Would also mind explaining _why_ you want to keep focus there? It makes little sense, as you will not be able to do **anything** else. — Oded, Mar 27 '13 at 21:57
Sorry, I mean that I want the text cursor to always be there. Is there a way to click on something else without the cursor going away? — Jabey, Mar 27 '13 at 22:24
To what purpose? You will not be able to click anywhere else as focus will go back to the control. — Oded, Mar 27 '13 at 22:25

score 18 · Accepted Answer · edited Apr 21 '16 at 07:43

18

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>

edited Apr 21 '16 at 07:43

vidriduch

4,753
8
41
63

answered Mar 27 '13 at 22:23

Denis O.

1,841
19
37

1

Thanks, but I also need to be able to click other things. Is it possible? – Jabey Mar 27 '13 at 22:29
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. – Denis O. Mar 27 '13 at 22:31
How would you do this in plain Javascript? I'm not experienced in jQuery at all. – Jabey Mar 27 '13 at 22:35
2

One last thing: Could it work like this? `` – Jabey Mar 27 '13 at 22:59
@in3D =) almost. you forgot to save element ref to global variable. It should be like this `` Vote you up for shortest code, but keep in mind that using inline JS is bad habit. – Denis O. Mar 27 '13 at 23:03
What does it mean to "save element ref to global variable?" – Jabey Mar 27 '13 at 23:09
@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](http://stackoverflow.com/questions/500431/javascript-variable-scope) – Denis O. Mar 27 '13 at 23:18
Oh, so like this: `` – Jabey Mar 27 '13 at 23:27
@in3D Exactly! But saying again - inline JS is a bad taste, try to avoid it. – Denis O. Mar 27 '13 at 23:29
@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 – elledienne Nov 28 '13 at 16:33
@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` – vam Feb 03 '19 at 14:18

Maintain focus on an input tag

1 Answers1

Linked