Prevent losing focus when click out of an input

Question

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

When I click on a key of the keyboard the input loses the focus during the click, and if the number of letters in the input is longer than the input size, the input shows the beginning of the string. And then when the click is released the input gets back the focus and the caret comes to the end of the string. So it's quite ugly because we have the impression that the input contents blink.

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

So I would like to prevent the input from losing the focus when we clicked on a button of the keyboard.

How can I do this?

Thanks.

You could try using .setInterval and have the function set the focus to the relevant textbox. In terms of ease of setting up this would be relatively painless, but I'm willing to bet there are more succinct answers out there. — MoarCodePlz, Jun 22 '11 at 13:38
You may simply need to be setting the cursor/caret position instead of focusing the field. Check out this [related question](http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area). — hughes, Jun 22 '11 at 19:12

score 7 · Answer 1 · answered Oct 10 '12 at 00:03

7

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

answered Oct 10 '12 at 00:03

Jake

558
4
12

3

This works, but keep in mind that when using this, selecting anything inside doesn't work anymore. – Tom Aug 02 '16 at 14:18

score -4 · Answer 2 · answered Jun 22 '11 at 19:19

-4

I think you're looking for a CSS property called outline.

#yourinput {
    outline: none;
}

That should take care of the box being highlighted when it has focus.

answered Jun 22 '11 at 19:19

CaptSaltyJack

15,283
17
70
99

1

You either meant for this answer to be on a different question, or you misunderstood what he was asking. – Doug S Oct 26 '12 at 00:09

Prevent losing focus when click out of an input

2 Answers2