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

【问题标题】：Limit the amount of digits allowed in a Number Input javascript限制数字输入javascript中允许的位数
【发布时间】：2022-01-22 02:47:01
【问题描述】：

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

所以我想出了 sn-p 中的内容，但有没有其他解决方案可以更快实施，或者总体上更好。

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

Similar 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;
}

&lt;input id = 'input' type = 'number'&gt;

【问题讨论】：

这能回答你的问题吗？ How can I limit possible inputs in a HTML5 "number" element?
@Kinglish 问题在于您仍然可以手动输入设置在该最大值之上的数字，这只是在您使用滑块时。
该帖子中还有一些 oninput 事件 javascript 显示了如何检查和修剪太大的输入。
是的，这和我的非常相似，我想知道是否有更好的解决方案

标签： javascript html

【解决方案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;
}

&lt;input maxlength='4' type='number'&gt;

【讨论】：

谢谢，太好了。我正在考虑结束这个问题，因为每个人都将我与一个非常不同的人联系起来。

【解决方案2】：

了解 HTML 的好地方是 MDN，它有 a dedicated page for <input type="number">。

属性列表包括：

最大

接受此输入的最大值。

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

&lt;input id='input' type='number' max='9999'&gt;

【讨论】：

虽然这个方案有效，但最大的问题是max的值只接受带有侧箭头的值，但是当你手动输入时，它会超过值
@ZainWilson-WCHStudent 当您尝试提交表单时，constraint validation 也会失败。
问题是它没有包含在表单中，我只需要一个数字输入
@ZainWilson-WCHStudent 您可以在其他事件上手动触发验证。或者您可以坚持使用您的自定义解决方案，因为您并没有真正按照规范预期的方式使用它。
你认为我应该结束我的问题吗？

【解决方案3】：

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

&lt;input id='input' type='text' maxlength='10'&gt;

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

【讨论】：

这不适用于type='number' 输入
对您的编辑发表评论，由于某种原因，pattern 元素对我不起作用，虽然我可以使用正则表达式包含类似的答案，但我只想限制数字的数量<input type = 'number'>
在这种情况下，我想最好使用 oninput 事件。查看链接问题的第二个答案。与您已有的非常相似，但更简洁。
你认为我应该结束我的问题吗？

【解决方案4】：

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

【讨论】：

抱歉，但在 chrome 中，最小值最大值不会阻止您输入比您设置的值更高的值。

【解决方案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'>

【讨论】：

【解决方案6】：

这应该会让你到达那里

    function limit(element){
        var max_num = 4;

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

&lt;input type="number" onkeydown="limit(this);" onkeyup="limit(this);"&gt;

【讨论】：

是的，那是我的确切 sn-p 谢谢。