I want to make a virtual keyboard on js like those that do on sites for calculators. For example, there is a button with the number 1, when clicked, the number 1 is added to the input field. Similarly with letters.

I am interested in this version of the virtual keyboard, so that when you click on its button, the same events are triggered as when you press a button on a regular keyboard (keypress, keydown), and the focus from the input field is not lost.

Tell me where to do it better?

  • What's the problem? Insert in value? or cause a meeting? - Mike
  • Why closed the answer to the question? : D - Visman
  • @Visman: his language is very vague. “I want to do it” - please do it. - Nick Volynkin ♦

1 answer 1

$(document).ready(function() { $('#myinput').on('keypress', function() { $('#action').fadeIn(function() { $(this).fadeOut(); }); }); $('.mybutton').on('click', function() { var Paste = $(this).data('paste'); $('#myinput').val($('#myinput').val() + Paste).trigger('keypress'); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="myinput"> <button class="mybutton" data-paste="1">1</button> <button class="mybutton" data-paste="2">2</button> <button class="mybutton" data-paste="3">3</button> <hr> <span id="action" style="display:none">Key press</span>