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

标签 javascript html reactjs events

如果我有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> 开始时输入无效输入元素,changevalue 以来事件不会触发被认为是空的(因为它无效)


或者,您可以使用 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/

相关文章:

javascript - Jquery - 单击时缩小 DIV

javascript - 如何安全地将数据从 php 表单传递到 html

reactjs - React-chessground 可以与 chessground@8 或更高版本一起使用吗?

javascript - 如果在特定字符串旁边,则在两个字符之间搜索字符串

javascript - 从 Typeahead 向 Bloodhound 传递参数?

html - 使用 knockout 将数据拆分为两个 Bootstrap 列

javascript - 在其他内容之前使用 Javascript 添加内容

javascript - 滚动 "stack"个 DOM 对象

javascript - 仅取消 React 应用程序中的当前 axios 请求

javascript - 如何修复控制台警告 "The resource ... was preloaded using link preload but not used within a few seconds from the window' s 加载事件”?