如果我有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;}