在 html 输入元素中只允许正值（包括十进制值）答案

【问题标题】：Allow only positive values in html input element (including decimal values)在 html 输入元素中只允许正值（包括十进制值）
【发布时间】：2018-10-18 03:00:48
【问题描述】：

我正在尝试创建一个只允许正数（包括十进制值）的输入元素。它不能有前导零，也不能允许用户在字段中复制/粘贴无效值（例如 -14.5）。

到目前为止我所拥有的：

<input type="number" onChange={this.handleChange} value={this.state.value}/>

private handleChange= (e) => {
        let amount = parseFloat(e.target.value);

        if (isNaN(amount) || amount < 0) {
            amount = 0;
        }

        this.setState({value: amount});
}

这可行，只是它始终保持前导零。我该如何解决？

【问题讨论】：

标签： javascript html reactjs validation event-listener

【解决方案1】：

以下将检查第一个位置是否存在零。

e.target.value.indexOf('0') === 0

注意：keyup 事件优先于 onclick 事件作为输入。

App.jsx

import React from 'react';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: ''
        }

        this.handleChange = this.handleChange.bind(this);
    }

    render() {
        return (
            <div>
                <input type="number" onChange={this.handleChange} value={this.state.value} />   
            </div>
        )
    }

    handleChange(e) {
        let amount = parseFloat(e.target.value);

        if (isNaN(amount) || amount < 0 || e.target.value[0] === '0') {
            amount = '';
        }

        this.setState({value: amount});
    }
}

export default App;

【讨论】：

我用更多信息更新了我的问题。现在正在从 state 中读取 value 属性。我也尝试了 onKeyUp 但它似乎没有更新该字段。
此解决方案不允许您删除前导零。零永远存在。
@ZeroDarkThirty 这是因为每当输入不正确时，您都会将值设为0：if (isNaN(amount) || amount amount = 0;
在原帖中我确实说过这不是我想要的。解决办法是什么？
@ZeroDarkThirty 然后设置amount = '';，这将清除输入

【解决方案2】：

如果是NaN 或negative，则不要执行设置状态。然后，当您打算插入错误的内容时，它不会改变任何内容。

【讨论】：