限制输入类型为数字的字符数

Question

我正在尝试限制输入框（类型为数字）中的字符数限制到X个。我尝试了很多选项，但似乎没有一个可用。我不想使用tel选项，因为它需要在移动设备上使用数字键盘（包括.和所有符号）。我也尝试了模式解决方案，但只在iOS上有效，在Android上无效（显示常规键盘）。

最好的方法是如果用户达到限制，则不允许其继续输入，如果用户想要突出显示文本并重新输入不同的数字，则允许他这样做。只是不让他输入超过指定的字符数。

所以，任何帮助都将不胜感激。

- marsalal1014

---

如果数字类型支持maxLength属性就太好了。在HTML5中，数字输入类型没有这个属性。 - marsalal1014

不要重复！我需要的是TYPE="NUMBER"而不是文本。 - marsalal1014

我改正了，这不是重复的。 - Brett DeWoody

@marsalal1014，你的浏览器支持HTML 5吗？<input type="number" name="pin" min="1000" max="9999">这段代码对我来说似乎是有效的。 - Dimag Kharab

它确实可以在最新版本的Chrome中使用。但问题在于，如果用户开始输入他想要的数字而不是使用输入框附带的切换按钮，它就无法处理。如果我开始输入1234567789，它将允许我输入任意数量的数字。 - marsalal1014

Answer 1

注意： charCode 是非标准且已弃用的，而 keyCode 仅仅是已弃用的。

请检查以下代码

JavaScript

<script>
function check(e,value)
{
    //Check Charater
    var unicode=e.charCode? e.charCode : e.keyCode;
    if (value.indexOf(".") != -1)if( unicode == 46 )return false;
    if (unicode!=8)if((unicode<48||unicode>57)&&unicode!=46)return false;
}
function checkLength()
{
    var fieldLength = document.getElementById('txtF').value.length;
    //Suppose u want 4 number of character
    if(fieldLength <= 4){
        return true;
    }
    else
    {
        var str = document.getElementById('txtF').value;
        str = str.substring(0, str.length - 1);
        document.getElementById('txtF').value = str;
    }
}

以下是带有 number 类型的 HTML input

onInput //Is fired also if value change from the side arrows of field in Chrome browser

<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength()" />

演示示例

更新 -- 更通用的代码示例

将上述函数更改为以下内容

function checkLength(len,ele){
  var fieldLength = ele.value.length;
  if(fieldLength <= len){
    return true;
  }
  else
  {
    var str = ele.value;
    str = str.substring(0, str.length - 1);
    ele.value = str;
  }
}

在HTML中这样使用

<!-- length 4 -->    
<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength(4,this)" />
<!-- length 5 -->    
<input  type="number" onKeyPress="return check(event,value)" onInput="checkLength(5,this)" />
<!-- length 2 -->    
<input  type="number" onKeyPress="return check(event,value)" onInput="checkLength(2,this)" />

Demo

- Blu

---

它也帮助了我。谢谢@Blu - Ram

仍然允许在开头和中间输入，删除最后一个字符。 - Ronald Dsouza

@RonaldDsouza 是的，因为这不是问题的要求。但是，如果您也不想在开头或中间允许，则可以查看 YashPatel 的答案，看它是否符合您的要求 https://dev59.com/Yn3aa4cB1Zd3GeqPXw03#22088379 - Blu

@Blu 不行，如果我输入9999999999（10位数字），我仍然可以按上箭头并将该数字变为10000000000（11位数字）。 - Ronald Dsouza

@RonaldDsouza，您可以使用CSS关闭旋转器。更新后的演示链接：http://jsfiddle.net/ys1d7xpr/ 。否则最好新开一个问题，详细说明您的需求。因为您的需求与当前OP的需求不同。 - Blu

Answer 2

另一种选择是使用tel输入类型，它遵守maxlength和size属性。

<input type="tel" size="2" maxlength="2" />

<input type="tel" size="10" maxlength="2" />

- Brett DeWoody

---

是的，如果我需要“.”符号，那将是最好的方法。就像一个重量计算器，用户可以输入123.3磅或123磅。如果我在移动设备上使用“tel”，它会显示电话键盘，没有“.”选项。 - marsalal1014

Answer 3

也许这会有所帮助。

这里是输入患者年龄的字段，只允许输入三个数字。

HTML

<input autocomplete="off" class="form-control"  id="Patient_Age" max="150" maxlength="3" name="PatientAge" placeholder="Age" size="3" type="number" value="0">

JS

<script>
    $(function () {         
        $("#Patient_Age").keydown(function (e) {
            // Allow: backspace, delete, tab, escape, enter  
            if ($(this).val().length <= 2 || $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
                // Allow: Ctrl+A
                // (e.keyCode == 65 && e.ctrlKey === true) ||
                // Allow: home, end, left, right
                (e.keyCode >= 35 && e.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
            }
            else {
                event.preventDefault();
            }
            // Ensure that it is a number and stop the keypress
            if ($(this).val().length <= 2 || (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
            else {
                event.preventDefault();
            }
        });
    }); // end of $

</script>

- NoWar

Answer 4

HTML5的number类型输入具有min和max属性。

如果希望限制字符数为1，则可以设置最小值为0，最大值为9。

还可以设置step属性，默认值为1，但如果希望选择小数或其他舍入数字，则会派上用场。

<input type="number" maxlength="1" max="9" min="1" size="1" />

这是有关编程的完整演示。

- Brett DeWoody

---

但它并不支持所有浏览器。 - Sarath

那可能有效，只要用户不在输入中键入任何内容。仅在单击输入末尾的箭头时起作用。 - marsalal1014

正如Sarath所指出的，number类型并不受所有浏览器支持。如果不使用JavaScript（当然你可以这样做），最好的选择可能是使用maxlength、min和max。不支持number类型的浏览器将会回退到text类型和maxlength限制。 - Brett DeWoody

再次强调，这只有在用户没有在输入框中输入数字时才能起作用。您可以随意输入任意数量的数字。 - marsalal1014

Answer 5

你可以像这样轻松地完成它，

<input type="text" pattern="\d*" maxlength="4">

- Hasini

Answer 6

对于十进制数值，比如 "25.2"，代码如下。

if(thisObj.value.indexOf(".") >=0)
{
    if(fieldLength <= 4)
    {
        return true;
    }
    else
    {
        var str = thisObj.value;
        str = str.substring(0, str.length - 1);
        thisObj.value = str;
    }
}
else
{
    if(fieldLength <= 2)
    {
        return true;
    }
    else
    {
        var str = thisObj.value;
        str = str.substring(0, str.length - 1);
        thisObj.value = str;
    }
}

- Atul

Answer 7

请审核这段代码。

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

<form name="myform">
<input name="limitedtextfield" type="text" onKeyDown="limitText(this.form.limitedtextfield,this.form.countdown,15);" 
onKeyUp="limitText(this.form.limitedtextfield,this.form.countdown,15);" maxlength="15"><br>
<font size="1">(Maximum characters: 15)<br>
You have <input readonly type="text" name="countdown" size="3" value="15"> characters left.</font>
</form>

- Karthick Kumar

---

这是一个不错的方法，但是你看当字符串中的额外字符被移除时。如果已经达到了限制，我需要防止/拒绝输入更多数字。 - marsalal1014

一旦达到限制，它们就可以输入更多，这是您想要的。 - Karthick Kumar

Answer 8

你可以尝试这段 jQuery 代码：

在 HTML 中：

<input type="number" id="number" />

在JS中

$(document).ready(function () {
    var element = document.getElementById('number');

    $("#number").keydown(function (event) {
        // Allow only backspace and delete

        if($(this).val().length <= 9 || event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 )
        {
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {
                // let it happen, don't do anything
            } else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }
        }else{

            event.preventDefault();
        }          

    });


});

我不确定它是否能在IOS和Android上运行，但它可以在所有浏览器上运行。

演示

- YashPatel

Answer 9

我认为这需要使用onkeyup事件处理程序。

使用此处理程序，一直输入数字，直到遇到5个keyup。之后，除非按下的键是退格键或删除键，否则不要让数字被输入，返回0。

- rahulmishra

Answer 10

2020年类型数字的正确方式是在按键按下时进行验证，应该像这样工作：onkeypress="checkValidation(fieldValue);" <-- 在HTML中输入和JS中：

checkValidation(a) {
    if (`${a}`.length < 8) {
        return true;
    } else {
        return false;
    }
}

- DanielWaw