Question

Let’s say I have a field and a button. The button submits the field and triggers some AJAX request which returns data to the same page. Every time the button is clicked, the field is deselected/blurred. This can be partially fixed by making the button focus the text field upon its click. However, during the click, there is a brief moment where the field blurs. The way I have my page set up this does not look good. I would like to completely prevent the field from blurring throughout the click. What is the easiest way to do this? Thanks!

Code:

<input type="text" id="f" autofocus/><span id="btn" onclick="document.getElementById('f').focus()"></span>

Answer 1

Instead of handling button click you can move the focus on button focus with a very small timeout:

jQuery:

$('#btn').focus(function (event) {
    setTimeout(function () {
        $('#f').focus();
    }, 5);
});

JavaScript:

document.getElementById('btn').onfocus = function (event) {
    setTimeout(function (event) {
        document.getElementById('f').focus();
    }, 5);
};