Tengo una etiqueta de entrada y lo que estoy tratando de hacer es escuchar la presión de la tecla / y colocar automáticamente el cursor en la etiqueta de entrada para comenzar a escribir en ella. Google ya tiene esto y automáticamente irá a la barra de búsqueda cuando presiones la tecla / . ¿Cómo puedo lograr esto? Cualquier ayuda es apreciada. Gracias por adelantado.
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" /> ACTUALIZACIÓN: como se sugirió, el método de enfoque lo hará, pero el carácter / también se registrará en la barra de entrada. ¿Cómo debería manejar esto? Debería hacer una función separada que elimine el carácter / si se detecta dentro de < 10 ms de la pulsación de la tecla / . ¿O alguna otra idea mejor?
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" />Esto debería manejar todos sus requisitos. Estoy usando keydown en lugar de keypress porque este último está en desuso.
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() }; });Debe usar una combinación de preventDefault para detener lo que iba a hacer el evento y focus , para enfocarse en la entrada. También necesita una forma de identificar el elemento del cuerpo en el que se hizo clic para lo cual necesita nodeName para que pueda seguir usando el elemento de entrada.
Su código (nota: que usa el oyente de keycode clave ahora obsoleto) actualizado para usar estos métodos:
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" /> Un código más moderno que usa code (gracias a Meron Ogbai por señalar que la keypress de teclas también está obsoleta).
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" />