目前我有以下代码
<input type="number" />
Run Code Online (Sandbox Code Playgroud)
它出现了这样的事情

右侧的小选择器允许数字变为负数.我该如何预防呢?
我对使用有疑问type="number",它造成的问题多于解决问题,无论如何我都会理智地检查它,所以我应该回去使用type="text"?
我想将用户输入限制为html格式的正数.
我知道你可以设置min ="0",但是可以通过手动输入负数来绕过它.
没有编写验证函数,有没有其他方法可以解决这个问题?
我有一个HTML编号输入元素:<input type="number">.问题是我还可以输入以下字符:+ - e E , .我不希望用户能够写入.
我如何限制这些?
考虑类型为的输入number,我希望此数字输入仅允许用户输入一个正数,非零数,整数(无小数)。使用min和的简单实现step如下所示:
class PositiveIntegerInput extends React.Component {
render () {
return <input type='number' min='1' step='1'></input>
}
}
ReactDOM.render(
<PositiveIntegerInput />,
document.getElementById('container')
)Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<p>
Try to input a decimal or negative number or zero:
</p>
<div id="container"></div>Run Code Online (Sandbox Code Playgroud)
上面的代码工作正常,如果用户枝只点击向上/向下数输入箭头,但只要使用键盘的用户开始他们将进入号码,如没有问题-42,3.14和0
好的,让我们尝试添加一些onKeyDown处理措施来避免此漏洞:
class PositiveIntegerInput extends React.Component {
constructor (props) {
super(props)
this.handleKeypress = this.handleKeypress.bind(this)
}
handleKeypress (e) {
const characterCode = e.key …Run Code Online (Sandbox Code Playgroud)