I am trying to make a custom keypad that can input a number with a fraction into a number input (important, not a text input).
However in chrome, when they use the keypad to type "0.", setting the value to "0." result in "0". However you can select the input and type "0." and it will accept it.
Before anyone points out the custom keycode and key attributes, its actually a web component in a shadow DOM, and one can add custom attributes in web components.
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>Try enter in the value "1.23".
I also tried what I think is superior, which is to simulate the keypress, but researching it, as usual, it is deemed insecure and not allowed:
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 string input against number, and convert it to number if you need later to calculate with it.
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>