javascript - 在 html 输入元素中只允许正值(包括十进制值)

Question

我正在尝试创建一个只允许正数(包括小数值)的输入元素。它不能有前导零，也不能允许用户在字段中复制/粘贴无效值(例如 -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});
}

除了它始终保持前导零之外，这有效。我该如何解决？

Answer 1

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

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

Note: keyup event is preferred over onclick event for inputs.

---

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;