javascript - 如何自动将光标设置为输入标签

Question

我有一个输入标签，我想做的是听/按键并自动将光标设置到输入标签以开始在其上输入。谷歌已经有了这个，当你按下/键时会自动进入搜索栏。我怎样才能做到这一点。任何帮助表示赞赏。提前致谢。

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" />

更新：正如建议的那样，焦点方法会做到这一点，但 / 字符也会在输入栏上注册。我该如何处理？/如果在按键后 < 10 毫秒内检测到，我应该创建一个单独的函数来删除 / 字符。还是有其他更好的想法？

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();
  }
};

<input id="inputBar" />

标签： javascripthtml

Answer 1

这应该可以满足您的所有要求。我使用 keydown 而不是 keypress 因为后者已被弃用。

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()
  };
});