如何使用更严格的限制来自定义`<input>`元素

Question

TLDR；（更新）

1. 是否有一种方法可以<input>在不使用type=number属性设置的情况下发出信号提示类型为数字的信号。
   1. 即移动设备识别并显示数字键盘等
2. 对于具有的<input>，type=number有一种方法可以吞下所有不会产生有效数字的键输入
   1. 在通过浏览器将字符添加到输入中之前，请勿进行垃圾删除 keyup

请阅读以下原始详细说明

我的问题如下；

我有一个html <input>元素，我只想接受数字并在移动设备上被识别为数字字段。我也希望吞下无效字符，就像标准type=number吞咽不允许的字符一样。

我尝试了明显的方法，type=number但是它有很多缺点。具体来说，它允许使用“ e”，“ +”和“-”（至少在chrome中），但是使用JS可以轻松解决这些问题。真正的问题在于“。” 字符，我希望能够输入浮点数，例如“ 0.10”，“ 5.5054”，但又不想输入无效的字符串，例如“ 0.10.1”。我试图通过仅允许1'来解决此问题。一次，但是input.value由于浏览器提示“ 5” 而失败。变为'5'，'5 ..'变为null（！），并且似乎无法获得在输入​​中键入的原始字符串值。以上意味着检查现有的'。'并采取行动似乎是死路一条...

核心问题：

1. 我有没有办法检查和验证输入？
2. ``有没有一种方法可以将输入标记为数字而无需后勤负担type=number？

注意：
*我意识到您可以粘贴您想要的任何内容，我认为行为是病理性的，因此不应被输入预防所涵盖。

更新：
为了澄清，我已经尝试过keypress，keydown等事件和他们没有足够的，因为我想看看有多少”的输入目前存在选择是否要允许其他。在这一点上input.value，浏览器已经按摩了，以删除“。”。我想有条件地允许基于当前输入的'。'字符。

示例：
HTML（为简洁起见，使用角度样式绑定）

<input type="number" (keydown)="keyDown()">

JS

function keyDown($event: KeyboardEvent) {
  const inputField = // obtain reference to input element
  const value = inputField.value;
  if ( value.indexOf('.') !== -1 && $event.key === '.') { // disallow another . if one is present
    // ! input field prunes . so this check isn't sufficient
    $event.preventDefault();
    return;
  }

  // This is the crux of the problem e.g.
  // type 5. into input field, value === 5
  // type 5.. into the input field, value === null
  // Since the . char is removed by the input element there's no way to know how many are present!
  console.log(value);
}

Answer 1

是否有一种方法可以<input>在不使用type=number属性设置的情况下发出信号提示类型为数字的信号。即移动设备识别并显示数字键盘等

使用inputmode="decimal"代替发type="number"信号通知移动设备使用数字键盘输入。这样，您可以type="text"根据需要继续使用和处理输入。

有关更多信息，请参见MDN，以及在设备上进行测试的inputtypes.com。