How to fire a keyboard keypress using Keycode

Question

I have a scenario where I have to prepare a JS method where Tab key should fire . i.e. When the Function is executed Tab button click should fire. preferably using Key code.

Answer 1

You can dispatch keyboard events, but the results might be less than overwhelming.

As shown below, you can dispatch an event with appropriate properties, but in some browsers the values are empty and the browser virtually ignores it. You can tab to the button and press "Enter" to click it. It dispatches a tab, but focus doesn't move and the associated event doesn't report the values set in the constructor.

Typing into the input shows the type of result you should get. Try it in lots of browsers.

function showEventProperties(evt) {
  document.getElementById('details').innerHTML = ['type','key','code','keyIdentifier','charCode','which','keyCode'].map(function(key) {
    return key + ': ' + evt[key]; 
  }).join('<br>');
}

function sendTab(node) {
  var evt = new KeyboardEvent('keypress', {
    'view': window,
    'bubbles': true,
    'key': 'Tab',
    'charCode': 9,
    'keyCode': 9,
    'which': 9
  });
  node.dispatchEvent(evt);
}

window.onload = function() {
  document.addEventListener('keypress',  showEventProperties, false);
}

<input onkeypress="showEventProperties(event)">
<br>
<button onclick="sendTab(this)">Do tab</button><button>Next button</button>
<p id="details"></p>

You can also try the older initKeyEvent.