Question

我想限制用户输入文字框的单词数量。我尝试了一个代码，它只是单个文本框成功，当我将它推荐到多个文本框时，这个代码不起作用，建议将非常感激。

<html>

<head>
<script type="text/javascript">
function validate(){
    x=document.myForm
    input=x.myInput.value
    if (input.length>5){
        alert("The field cannot contain more than 5 characters!")
        return false
    }else {
        return true
    }
}
</script>
</head>

<body>
<form name="myForm" action="http://www.java2s.com" onsubmit="return validate()">
Enter some text (less than 5 characters):
<input type="text" name="myInput" size="20">
<input type="submit" value="Submit">
</form>
</body>

</html>

Answer 1

有两种方法可以解决这个问题：

方法1： 使用maxlength="5"属性

＆＃13;

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

＆＃13;

方法2：

使用Javascript：

＆＃13;

<script language="javascript" type="text/javascript">
function limitInput(field, max) {
    if (field.value.length > max) {
        field.value = field.value.substring(0, max);
    }
}
</script>

    <input type="text" name="somename" onKeyDown="limitInput(this,5);" onKeyUp="limitInput(this,5);"" />

＆＃13;

<强>更新

留言：

＆＃13;

    <script language="javascript" type="text/javascript">
    var errHolder = document.getElementById('err');
    function limitInput(field, max) {
        if (field.value.length > max) {
          err.style.display = 'inline-block';
        }
        else
        {
          err.style.display = 'none';
        }
    }
    </script>

        <span>
        <input type="text" name="somename" onKeyDown="limitInput(this,5);" onKeyUp="limitInput(this,5);" />
</span>
<span id="err" style="display:none;background-color:red;">Please enter less than 5 characters</span>

＆＃13;

Answer 2

您可以在每次用户输入时设置maxlength属性或修剪字符串。使用maxlength是一种更好的方法

＆＃13;

var input = document.getElementById("limit5");
var LIMIT = 5;
input.onkeyup=function(){
  if(input.value.length > LIMIT){
    input.value = input.value.substr(0,LIMIT);
    //alert("Please limit your input to 5 characters")
  }
}

＆＃13;

<input id="autolimit5" maxlength="5" type="text"/>
<input id="limit5" type="text"/>

＆＃13;

Answer 3

有许多方法可以阻止用户在表单元素中输入数据。您尝试的是在用户单击“提交”按钮时一次性验证所有数据。在用户输入时验证会更好。当用户按下键盘上的任何内容时，基本上会有4个相关事件。

onkeypress事件
的onkeydown
的onkeyup
onInput

您可以结合使用这些事件来实现您想要的任何功能。对于问题中的用例，我们可以使用按键事件。

<html>

<head>
<script type="text/javascript">
function validate(){
    x=document.myForm
    input=x.myInput.value
    if (input.length>5){
        alert("The field cannot contain more than 5 characters!")
        return false
    }else {
        return true
    }
}

// function which runs on every keypress of input element to which this 
// function is attached
function validateTextField(e){
    if(event.currentTarget.value.length >= 5){ 
        return false;
    }
}
</script>
</head>

<body>
<form name="myForm" action="http://nothing.com" onsubmit="return validate()">
Enter some text (less than 5 characters):
<input type="text" name="myInput" size="20" onkeypress="return validateTextField(event)">
<input type="text" name="anotherInput" size="20" onkeypress="return validateTextField(event)">
<input type="submit" value="Submit">
</form>
</body>

</html>enter code here

如果需要，您可以通过更改某些参数来自定义验证的大小

使用下面的

<input type="text" name="myInput" size="20" onkeypress="return validateTextField(event, 5)">
<input type="text" name="anotherInput" size="20" onkeypress="return validateTextField(event, 8)">

更新函数定义以使用第二个参数

function validateTextField(e, size){
    console.log(e);
    if(event.currentTarget.value.length >= size){ 
        return false;
    }
}

限制用户在没有按钮单击操作的情况下进入文本框的单词数

3 个答案: