Question

我试图将输入中的字符（数字类型）限制为X数。香港专业教育学院尝试了很多选择，似乎没有工作。我不想使用选项tel，因为它需要移动设备上的数字键盘（是的，带。，和所有符号）我也试过模式解决方案，但它只适用于iOS，没有在android中工作（显示正常键盘）。

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

所以，任何帮助都表示赞赏。

Answer 1

检查此代码

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

和HTML input下面有number类型

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

Fiddle Demo

更新 - 一点点通用代码示例

将上述功能改为此

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

Answer 2

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

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

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

Answer 3

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

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

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

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

这里有完整的 demo

Answer 4

可能会有用。

这是输入患者年龄的字段。它只允许输入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 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上工作，但它在所有浏览器上工作。

DEMO

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

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

13 个答案: