限制数字输入中允许的位数 javascript

Question

我有一个数字输入： <input type = 'number> ，我需要知道如何限制可以插入输入的整数数量

所以我想出了片段中的内容，但是还有其他解决方案可以更快地实现，或者总体上更好。

This question有一个类似的答案，但我正在尝试搜索互联网，看看是否有更好的答案。

类似问题

编辑：我找到了适合它的答案，我正在寻找一种可行的方法。 像max = '4'或输入的版本maxlength = '4'

 const Input = document.getElementById('input') function limitDigits(element, amount) { element.addEventListener('input', () => { if (element.value.length > amount) { element.value = Math.floor(element.value/10) } }) } limitDigits(Input, 4)

 input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #input { width:30px; }

 <input id = 'input' type = 'number'>

Answer 1

唯一更有效的事情（尤其是如果您多次使用此功能）是使其更可重用 - 这样您就不必每次都通过代码实例化它。

 document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('[maxlength]').forEach(input => { input.addEventListener('input', e => { let val = e.target.value, len = +e.target.getAttribute('maxlength'); e.target.value = val.slice(0,len); }) }) })

 input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #input { width: 30px; }

 <input maxlength='4' type='number'>

Answer 2

您可以使用maxlength属性来执行此操作：

 <input id='input' type='text' maxlength='10'>

不幸的是，这不适用于类型编号的输入。 可以在此处找到解决方法： maxlength 在 Chrome 中为 input type="number" 忽略

Answer 3

了解 HTML 的好地方是 MDN，它有一个专门的页面<input type="number"> 。

属性列表包括：

最大限度

此输入接受的最大值。

请注意，数字字段旨在表示实际数值，而不是恰好由数字组成的字符串。 因此，与其说“长度小于 4 位”，不如说“小于或等于九千九十九的值”：

 <input id='input' type='number' max='9999'>

Answer 4

HTML5 给出的解决方案，在 go 中添加 min 和 max 和 uou good 的属性。

Answer 5

通过使用模块，我找到了一种方法

HTMLElement.prototype.limitDigits = function (max) {
    this.addEventListener('input', () => {
        if (this.value.length > max) {
            this.value = Math.floor(this.value/10)
        }
    })
}

 HTMLElement.prototype.limitDigits = function (max) { this.addEventListener('input', () => { if (this.value.length > max) { this.value = Math.floor(this.value/10) } }) } //Element.limitDigits(maxLength) const Input = document.getElementById('input'); const InputTwo = document.getElementById('input2'); Input.limitDigits(4); InputTwo.limitDigits(1);

 input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input { width: 30px; }

 Default: <input type = 'number'> <br><br> Limit is set to 4 Digits: <input id = 'input' type = 'number'> <br> <br> Litmit is set to 1 Digit:<input id = 'input2' type = 'number'>

Answer 6

这应该能让你到达那里

 function limit(element){ var max_num = 4; if(element.value.length > max_num) { element.value = element.value.substr(0, max_chars); } }

 <input type="number" onkeydown="limit(this);" onkeyup="limit(this);">