How to automatically set the cursor to an input tag-CodePudding

I have an input tag and what im trying to do is listen for the / key press and automatically set the cursor to the input tag to start typing on it. Google already has this and will automatically go to the search bar when you press the / key. How can I achive this. Any help is appreciated. Thanks in advance.

document.onkeypress = function(evt) {
  evt = evt || window.event;
  var charCode = evt.keyCode || evt.which;
  var charStr = String.fromCharCode(charCode);
  if (charStr == '/') {
    //set cursor to input bar
  }
};

#inputBar {
  position: absolute;
  top: 2%;
  left: 3%;
}

<input id="inputBar" />

UPDATE: as suggested the focus method will do it but the / charater will also get registerd on the input bar. How should i handle this? Sholud i make a separate function that removes the / char if detected within < 10ms of the / keypress. Or any other better ideas?

document.onkeypress = function(evt) {
  evt = evt || window.event;
  var charCode = evt.keyCode || evt.which;
  var charStr = String.fromCharCode(charCode);
  if (charStr == '/') {
    //set cursor to input bar
    document.getElementById("inputBar").focus();
  }
};

CodePudding user response：

This should handle all your requirements. I'm using keydown instead of keypress because the latter is deprecated.

document.addEventListener('keydown', function (e) {
  const inputBar = document.getElementById("inputBar")
  const isFocused = inputBar === document.activeElement
  if (isFocused) return
  if (e.code == 'Slash') {
    e.preventDefault()
    inputBar.focus()
  };
});

CodePudding user response：

You need to use a combination of preventDefault to stop what the event was going to do, and focus, to focus on the input. You also need a way to identify the the body element was clicked for which you need nodeName so you can still use the input element.

Your code (note: which uses the now-deprecated keycode listener) updated to use these methods:

var input = document.getElementById('inputBar');

document.onkeypress = function(evt) {
  evt = evt || window.event;
  var nodeName = evt.target.nodeName;
  var charCode = evt.keyCode || evt.which;
  var charStr = String.fromCharCode(charCode);
  if (nodeName === 'BODY' && charStr == '/') {
    evt.preventDefault();
    input.focus();
  }
};

<input id="inputBar" />

Some more modern code that uses code (thanks for Meron Ogbai for pointing out that keypress is also deprecated).

const input = document.querySelector('#inputBar');

document.addEventListener('keydown', handleKey, false);

function handleKey(e) {
  const { code } = e;
  const { nodeName } = e.target;
  if (nodeName === 'BODY') {
    e.preventDefault();
    if (code === 'Slash') input.focus();
  }
}

<input id="inputBar" />

CodePudding user response：

Maybe you could add a CSS rule that when you hover over the input, it becomes active.