Maintain focus on an input tag

2019-02-18 01:22发布

问题:

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

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

But it doesn't seem to work.

回答1:

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>