How to make element not lose focus when button is pressed?

Question

I have a textarea in which I am inserting content at the location of the caret (thanks to Tim Down's answer). It inserts the content when the user presses a button. But it seems that when the button is pressed, the focus on the textarea is lost. How do I keep the focus there, providing the location of the caret is also the same? I was thinking along the lines of using evt.preventDefault() with .focusout(). If that helps.

Beggs

Answer 1

Handle the mousedown-event instead of the click-event. The mousedown event will be handled before the focus of another element is lost.

In your mousedown eventhandler, you need to to prevent event default behavior.

e.preventDefault(); // in your mousedown eventhandler

JS-Fiddle demo

Quenelle

this has the sideeffect of preventing from firing :active – Guggenheim

I have updated the code example to show that the :active selector is still working as expected. Maybe i am missing something? Please explain your issue more detailed or provide a code example. Thanks! – Quenelle

Just keep mouse clicked over button. You will see that button:active styles do not get applied. (Firefox 76) – Guggenheim

You are correct. In Chrome, it was fine - i have updated my answer. – Quenelle

It worked fine for me, thank you! Just a warning: it's a mousedown event and not click event! I didn't read it carefully and took me some time to make it work. Just to be sure that this will not happen to you :) – Vassily

Answer 2

You can't stop the focus from moving to a focusable element and still allow the mouse click to have its normal behavior (such as click the button). If you click on an element that supports focus such as a button, it will get the keyboard focus.

It is possible to programmatically put focus back on an element if done properly. If done poorly, it can ruin the usability of a page.

Demo: JSFiddle

Sophisticated

Can you tell me how? Sorry I don't know. – Beggs

@think123 - I added a working demonstration to the end of my answer. – Sophisticated

Good answer. All the same, I found that unselectable="on" also seems to work, for buttons at least. – Beggs

In the demo where is do what ever here can we add something to the selection? – Plucky

@Sophisticated @think123 You totally can stop focus from moving to a focusable element, if you .preventDefault() in mousedown: jsfiddle.net/Ddffh/103 . On click just happens to be too late because after mousedown, focus has already been lost. You can verify this in your own demo by holding the mouse button down for a bit before releasing: when you first mousedown, focus will be lost; after you release, the click event fires. – Roobbie

@Han - I think the question here is how you allow the control to have it's normal behavior AND prevent it from getting focus (in the specific case the OP mentions, it is a button they want pressed). I think your suggestion will block the normal behavior of the mouse click which is not what the OP wants. – Sophisticated

@Han, it would be good if you will add your comment as answer, it just helped me alot, but it seems like not everybody are reading comments. – Cholon

Answer 3

You have to renew focus when button is pressed.

HTML code:

<input id="messageBox" autofocus />
<input type="button" id="messageSend" onclick="setFocusToMessageBox()" value="Send" />

Javascript code:

<script>
function setFocusToMessageBox(){
    document.getElementById("messageBox").focus();
}
</script>

Heartbreak

this takes around half a second to happen. Which means the keyboard closes and then opens. i want something like whatsapp and stuff where keyboard doesn't even flick when clicking send. – Penitence

Answer 4

You can easily do this by applying focus back to the text area programmatically as the button click function is over. This way you can regain the focus along with the click event each time.

Bathelda

Answer 5

Try using tabindex="-1" on button, maybe that'll work.

<input type="text" name="body" id="body" Placeholder="message..">
<input type="submit" value="send" id="sendButton" tabindex="-1">

Penitence