如果我有input[type=number],Chrome不仅允许我键入数字,还允许我键入像-(减号)这样的字符来表示负数。看起来你真的可以把这些-减号和点的倍数打出来,例如:".....---888"。当这种情况发生时,在on-change事件中,event.target.value的属性将是一个空字符串(因为它不是一个有效的数字)。但我希望显示验证消息,告诉用户必须键入实际数字。
所以问题是:我如何读取实际值,即显示在输入字段中的值,因为它似乎有时与event.target.value
我不知道这是否重要-这是在React应用程序中

最佳答案

您可以使用event.target.validity.valid或更好的event.target.validity.badInput属性来检查该值是否有效。
(尽管IE似乎不支持badInput
但是我将使用input事件而不是change事件,因为如果用户在空的<input>元素开始时输入了无效的输入,change事件将不会触发,因为value被认为是空的(因为它是无效的)
或者,您可以使用css:invalid选择器来显示隐藏的消息(需要特定的html结构)

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

07-24 09:36
查看更多