javascript - 如何从输入中获取 "real"值[type=number]

Question

如果我有input[type=number] , Chrome 让我不仅可以输入数字，还可以输入像 - 这样的字符(减号)- 用于负数。看起来你实际上可以输入多个 - 减号和点，例如:".....---888" .当这种情况发生时，在 on-change事件，属性 event.target.value将是一个空字符串(因为它不是有效数字)。但我希望出现验证消息，告诉用户必须键入一个实际数字。

所以问题是:我如何读取实际值，即显示在输入字段中的值，因为看起来，有时它与 event.target.value 不同。

我不知道这是否重要 - 这是在 React 应用程序中

Answer 1

您可以使用 event.target.validity.valid甚至更好 event.target.validity.badInput属性来检查值是否有效。
(虽然 badInput 似乎不被 IE 支持)

但我会使用 input事件而不是 change事件，因为如果用户在从空 <input> 开始时输入无效输入元素，change自 value 以来事件不会触发被认为是空的(因为它无效)

---

或者，您可以使用 css :invalid选择器并使用它来显示隐藏的消息(需要特定的 html 结构)

input[type="number"] ~ span.message{display:none;}
input[type="number"]:invalid ~ span.message{display:block;}