Question

我有这样的输入

<input max="100" min="0" type="number">

但是在此输入中，用户可以输入数字，例如01 02 03 004 itp ... 我的问题是如何预防这种情况？只显示0到100之间的数字

0，1，2，3 ... 100

Answer 1

在大多数情况下，JavaScript是答案：

<input type="text" id="taskinput">
<script>
    const input = document.getElementById('taskinput');

    let lastValue = '';

    input.oninput = () => {
        if (!input.value) {
            lastValue = '';
            return;
        }

        const val = parseInt(input.value);

        if (val > 100 || isNaN(val)) {
            input.value = lastValue;
            return;
        }

        lastValue = val;
        input.value = lastValue;
    }
</script>

Answer 2

您可以通过在输入中添加onchange事件监听器来对此进行归档。

正则表达式将删除前导零。

document.getElementById('number').onchange = function(){
	this.value = this.value.replace(/\b0+[0-9]/g, '');
};

<input id="number" min="0" max="100" step="1" type="number" >

如何图案化html5输入

2 个答案: