Estoy tratando de hacer un teclado personalizado que pueda ingresar un número con una fracción en una entrada de número (importante, no una entrada de texto).
Sin embargo, en Chrome, cuando usan el teclado para escribir "0", configuran el valor en "0". resultado en "0". Sin embargo, puede seleccionar la entrada y escribir "0". y lo aceptará.
Antes de que alguien señale el keycode clave personalizado y los atributos key , en realidad es un componente web en un DOM oculto, y se pueden agregar atributos personalizados en los componentes web.
function clickHandler(event) { if (!event.target.hasAttribute('key')) return; const key = event.target.getAttribute('key') const keyCode = event.target.getAttribute('keycode') const input = document.getElementById("INPUT"); input.focus(); input.value = input.value + key; } document.addEventListener('click', clickHandler); #CONTAINER { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 32px; } button { padding: 4px; } <input type="number" id="INPUT" min="0" step="0.01"> <div id="CONTAINER"> <button type="button" keycode="49" key="1">1</button> <button type="button" keycode="50" key="2">2</button> <button type="button" keycode="52" key="3">3</button> <button type="button" keycode="54" key="4">4</button> <button type="button" keycode="56" key="5">5</button> <button type="button" keycode="58" key="6">6</button> <button type="button" keycode="60" key="7">7</button> <button type="button" keycode="62" key="8">8</button> <button type="button" keycode="64" key="9">9</button> <button type="button" keycode="8" key="Backspace">BS</button> <button type="button" keycode="48" key="0">0</button> <button type="button" keycode="110" key=".">.</button> </div>Intente ingresar el valor "1.23".
También probé lo que creo que es superior, que es simular la pulsación de tecla, pero al investigarlo, como de costumbre, se considera inseguro y no está permitido:
const init = { key: key, code: key, charCode: Number(keyCode), keyCode: Number(keyCode), bubbles: true, cancelable: false, composed: true, } input.dispatchEvent(new KeyboardEvent('keypress', init));Use la entrada de cadena contra el número y conviértalo en número si necesita calcularlo más adelante.
function clickHandler(event) { if (!event.target.hasAttribute('key')) return; const key = event.target.getAttribute('key') const keyCode = event.target.getAttribute('keycode') const input = document.getElementById("INPUT"); input.focus(); input.value = input.value + key; } document.addEventListener('click', clickHandler); #CONTAINER { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 32px; } button { padding: 4px; } <input type="STRING" id="INPUT" min="0" step="0.01"> <div id="CONTAINER"> <button type="button" keycode="49" key="1">1</button> <button type="button" keycode="50" key="2">2</button> <button type="button" keycode="52" key="3">3</button> <button type="button" keycode="54" key="4">4</button> <button type="button" keycode="56" key="5">5</button> <button type="button" keycode="58" key="6">6</button> <button type="button" keycode="60" key="7">7</button> <button type="button" keycode="62" key="8">8</button> <button type="button" keycode="64" key="9">9</button> <button type="button" keycode="8" key="Backspace">BS</button> <button type="button" keycode="48" key="0">0</button> <button type="button" keycode="110" key=".">.</button> </div>