CODEWITHSUNDEEP
javascripthtmlcssangular
Sumit Ridhal
Sumit Ridhal

Reputation: 1419

Stop input from losing focus on Virtual keyboard click

I've created a custom virtual keyboard for a kiosk application. The problem is every time you click on keyboard keys, input field loses its focus. Any help would be appreciated.

Upvotes: 2

Views: 2081

Answers (2)

Shivam Singh
Shivam Singh

Reputation: 1731

You can shift the focus back as soon as the input loses out the focus on click on the virtual keyboard.

let input = document.getElementById('input')
input.focus() // focus on input on page load

function handleInput (key) {
 input.value += key // add key value to input
}
<button onclick="handleInput('a')">a</button>
<button onclick="handleInput('b')">b</button>
<button onclick="handleInput('c')">c</button>

<input onfocusout="this.focus()" id="input"/> <!-- focus on input back on onfocusout ie. when user click elsewhere -->

Input is always in focus.

Upvotes: 3

M T
M T

Reputation: 136

Prevents focusing the element then returns focus to the desired field.

$('#div').on('mousedown', function(event) {
   event.preventDefault();
   $('#field').focus();
});

Upvotes: 1

Related Questions