Triggering a keypress on an input with jQuery

Question

I want to show keypress onclick data in input box. Please help.

$('.keypress').click(function(e) {
  var code = $(this).data('code');
  $('#input').trigger(
    jQuery.Event('keypress', {
      keyCode: code,
      which: code
    })
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p><label>input: <input type="text" name="foo" id="input" value="" /></label></p>

<p>
  <button class="keydown" data-code="13">Trigger keydown Enter</button>
  <button class="keypress" data-code="13">Trigger keypress Enter</button>
  <button class="keyup" data-code="13">Trigger keyup Enter</button>
</p>

<p>
  <button class="keydown" data-code="65">Trigger keydown 'a'</button>
  <button class="keypress" data-code="65">Trigger keypress 'a'</button>
  <button class="keyup" data-code="65">Trigger keyup 'a'</button>
</p>

Here is the code: https://jsfiddle.net/rickj33/3fby0nzr/

Do you specifically need to trigger a `keypress` event? Why not just append an `a` character to the current value of the `input`? — Rory McCrossan, Oct 26 '18 at 07:30
to get the character you can use `var character = String.fromCharCode(code).toLowerCase();` — Nitin Sawant, Oct 26 '18 at 07:43

score 0 · Answer 1 · answered Oct 26 '18 at 07:35

0

Just do this:

$('.keypress').click(function(e) {
  var code = $(this).data('code');
  var e = jQuery.Event("keydown");
  e.which = 65;
  $('#input').trigger(e);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p><label>input: <input type="text" name="foo" id="input" value="" /></label></p>

<p>
  <button class="keydown" data-code="13">Trigger keydown Enter</button>
  <button class="keypress" data-code="13">Trigger keypress Enter</button>
  <button class="keyup" data-code="13">Trigger keyup Enter</button>
</p>

<p>
  <button class="keydown" data-code="65">Trigger keydown 'a'</button>
  <button class="keypress" data-code="65">Trigger keypress 'a'</button>
  <button class="keyup" data-code="65">Trigger keyup 'a'</button>
</p>

answered Oct 26 '18 at 07:35

Jack Bashford

43,180
11
50
79

This is logically identical to what the OP has, and would appear to not work either. At least in Chrome on Win10 – Rory McCrossan Oct 26 '18 at 07:37
want to show click value in input box.. like if i click trigger keypress 'a' input box should show a text – Manish Salunke Oct 26 '18 at 07:40
@RoryMcCrossan I took the syntax from [this answer](https://stackoverflow.com/questions/832059/definitive-way-to-trigger-keypress-events-with-jquery/832121#832121) – Jack Bashford Oct 26 '18 at 07:40
In which case this question would be a duplicate, however that answer is over 9 years old and now out of date as the example above clearly doesn't work. – Rory McCrossan Oct 26 '18 at 07:41
@RoryMcCrossan I will update my answer with the information I can find from the jQuery documentation – Jack Bashford Oct 26 '18 at 07:42
@RoryMcCrossan and [this page](http://www.port135.com/2017/12/24/how-to-simulate-keyboard-key-press-in-javascript-using-jquery/) backs up the information in my answer. – Jack Bashford Oct 26 '18 at 07:46
1

I'm sure it does, but you can clearly see both your example and the OP's do not work... – Rory McCrossan Oct 26 '18 at 07:47

score 0 · Answer 2 · answered Oct 26 '18 at 07:56

0

What you are asking is, just to display the code (binded using data attribute) in the input box. So you can do it simply as follows.

$('.keypress').click(function(e) {
   var code = $(this).data('code');
   $('#input').val(code);                
});

answered Oct 26 '18 at 07:56

Vishnu S Krish

446
3
8

Triggering a keypress on an input with jQuery

2 Answers2