Preventing loss of focus when clicking on an input

Question

I am developing a virtual keyboard in jQuery and my problem is:

When I press a keyboard key, the input loses focus during a click, and if the number of letters in the input is greater than the size of the input, the beginning of the line is displayed in the input. And then, when the click is released, the input goes back, and the caret approaches the end of the line. So this is pretty ugly, because we get the impression that the contents of the input are blinking.

theButtonDiv.click(function() { attachedInput.value = idOfAttachedInput.value + theActualKey; attachedInput.focus(); }); 

Therefore, I would like the input to not lose focus when we press a button on the keyboard.

How can i do this?

Thanks.

Answer 1

One way is to listen for the "mousedown" event on the top-level keyboard of the node and call preventDefault on the event object.

Answer 2

I think you are looking for a CSS property called outline .

 #yourinput { outline: none; } 

This should make sure that the window is highlighted when it has focus.