32

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.

Community
  • 1
  • 1
Lucas
  • 16,930
  • 31
  • 110
  • 182

5 Answers5

68

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

Thomas Deutsch
  • 2,344
  • 2
  • 27
  • 36
  • this has the sideeffect of preventing from firing :active – laconbass May 13 '20 at 10:13
  • 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! – Thomas Deutsch May 14 '20 at 06:00
  • Just keep mouse clicked over button. You will see that button:active styles do not get applied. (Firefox 76) – laconbass May 14 '20 at 15:11
  • You are correct. In Chrome, it was fine - i have updated my answer. – Thomas Deutsch May 15 '20 at 19:37
  • 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 :) – Ricardo Magalhães Jul 09 '20 at 09:03
8

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

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Can you tell me how? Sorry I don't know. – Lucas Aug 28 '12 at 08:00
  • @think123 - I added a working demonstration to the end of my answer. – jfriend00 Aug 28 '12 at 08:07
  • Good answer. All the same, I found that `unselectable="on"` also seems to work, for buttons at least. – Lucas Aug 28 '12 at 08:28
  • In the demo where is do what ever here can we add something to the selection? – MadeInDreams Jan 20 '16 at 09:40
  • 23
    @jfriend00 @think123 You totally can stop focus from moving to a focusable element, if you `.preventDefault()` in mousedown: http://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. – Han Seoul-Oh Mar 16 '16 at 18:43
  • @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. – jfriend00 Mar 16 '16 at 22:33
  • 1
    @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. – Andrey Rudenko May 14 '16 at 21:50
1

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>
Tmthetom
  • 69
  • 3
  • 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. – UNK30WN Oct 12 '22 at 08:35
0

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.

nbrooks
  • 18,126
  • 5
  • 54
  • 66
Shiv Kumar Ganesh
  • 3,799
  • 10
  • 46
  • 85
0

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">
UNK30WN
  • 74
  • 7