JavaScript，在按下小数点时以编程方式更改数字输入

Question

我正在尝试使一个自定义键盘，可以输入一个分数的数字到一个数字输入(重要的，而不是文本输入)。

然而在chrome中，当他们使用键盘键入"0."，设置值为"0."结果为"0"。但是，您可以选择输入并键入"0."它会接受的。

在有人指出自定义keycode和key属性之前，它实际上是一个影子DOM中的web组件，并且可以在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>

尝试输入值"1.23"。

我还尝试了我认为更好的，这是模拟按键，但研究它，像往常一样，它被认为是不安全的，不允许:

const init = {
    key: key,
    code: key,
    charCode: Number(keyCode),
    keyCode: Number(keyCode),
    bubbles: true,
    cancelable: false,
    composed: true,
}
input.dispatchEvent(new KeyboardEvent('keypress', init));

Answer 1

对数字使用字符串输入，如果以后需要使用它进行计算，则将其转换为数字。

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>