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 es 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.

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 es 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.

• javascript
• jquery
• focus
• caret

• 1 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 Commented Jun 22, 2011 at 13:38
• 1 You may simply need to be setting the cursor/caret position instead of focusing the field. Check out this related question. – hughes Commented Jun 22, 2011 at 19:12

2 Answers 2

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

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.