限制输入类型号中的字符数

Question

我试图将输入中的字符（数字类型）限制为 X 编号。 我尝试了很多选择，但似乎都不起作用。 我不想使用选项 tel，因为它需要移动设备上的数字键盘（是的，带有 . 和所有符号）我也尝试了模式解决方案，但它仅适用于 iOS，不适用于 android（显示正常键盘）。

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

因此，任何帮助表示赞赏。

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)" />

演示

Answer 2

另一种选择 - tel输入类型遵守maxlength和size属性。

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

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

Answer 3

可能会有用。

这是输入患者年龄的字段。 它只允许输入 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>

Answer 4

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

如果您想将字符数限制为 1，您可以设置最小值为 0，最大值为 9。

您还可以设置step属性，默认情况下为 1，但如果您希望能够选择小数或其他四舍五入的数字，则可以使用该属性。

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

这是完整的演示

Answer 5

请查看此代码

<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>

Answer 6

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

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

Answer 7

你可以试试这个 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 N Android 但它适用于所有浏览器。

演示

Answer 8

对于十进制值，假设“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;
    }
}

Answer 9

你可以很容易地做到这一点，

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

Answer 10

2020 年类型号的正确方法是检查 keydown 验证，它应该像这样工作： onkeypress="checkValidation(fieldValue);" <-- 在 html 和 js 中输入：

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

Answer 11

像这样使用 maxlength 属性。

<input type="text" maxlength="5"/>

Answer 12

伙计，为什么要使用 javascript？ 你试一试

<input type="text" maxlength="4" size="4">

maxlength 无论如何都会定义输入字段的最大长度。

希望这解决了问题:)

编辑：既然你特别想要数字，为什么不使用上面的然后运行 ​​jquery 验证来检查数字？ 这也将工作..

编辑：好的，试试

<input type="number" name="pin" min="1000" max="9999">

Answer 13

您是否尝试过属性 maxlength ？

<input type="text" maxlength="5" name="user" >