如果我有input[type=number]
, Chrome 让我不仅可以输入数字,还可以输入像 -
这样的字符(减号)- 用于负数。看起来你实际上可以输入多个 - 减号和点,例如:".....---888"
.当这种情况发生时,在 on-change
事件,属性 event.target.value
将是一个空字符串(因为它不是有效数字)。但我希望出现验证消息,告诉用户必须键入一个实际数字。
所以问题是:我如何读取实际值,即显示在输入字段中的值,因为看起来,有时它与 event.target.value
不同。
我不知道这是否重要 - 这是在 React 应用程序中
最佳答案
您可以使用 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;}
关于javascript - 如何从输入中获取 "real"值[type=number],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44686686/