达到最大长度限制时更改输入字段样式答案

【问题标题】：Change input field style when reaches max length limit达到最大长度限制时更改输入字段样式
【发布时间】：2015-10-08 14:29:28
【问题描述】：

我创建了一个包含文本输入字段并设置了maxlength 的联系表单。我希望当输入的字符大于10时，让输入字段显示为红色。

<form action="contact.php">
  Username: <input type="text" name="name" maxlength="10"><br>
  <input type="submit" value="Submit">
</form>

【问题讨论】：

这是不可能的，因为它首先不允许文本长度超过最大长度。

标签： javascript jquery css maxlength

【解决方案1】：

您可以在 CSS 中使用选择器 :invalid

input:invalid {
    border: 1px solid #FF0000;
}

这将为您的所有 Input 元素提供红色边框，只要它们不符合条件（尽管如其中一个 cmets 所述，您的输入字段中的字符数永远不会超过“maxlength”）。

【讨论】：

我在 javaScript 中添加了无效的类？
其实 TylerH 是对的，maxlength 限制了你可以输入的字符数，所以你将不得不使用 Matheus208 的解决方案并使用 jQuery（或者你喜欢的 JavaScript）。我会修改我的答案。

【解决方案2】：

你可以这样使用：

$("name[usrname]").change(function(){
  if($(this).val().length > 10){
    $(this).css("color","red");
  }
});

【讨论】：

【解决方案3】：

maxlength="10" 属性不允许您插入超过 10 个字母。无论如何，你可以这样做：



    function checkUser(user){
    var number = user.length;
    if(number>10){
    document.getElementById("username").style.borderColor = "red";
   // <!-- document.getElementById("submit").disabled = true;  Disable submit button -->`enter code here`
document.getElementById("maxReached").style.visibility = "visible";
    }else {
document.getElementById("maxReached").style.visibility = "hidden";
document.getElementById("username").style.borderColor = "black";
    }
}
    <html>
    <head>

    </head>
    <body>

    <form action="">
      Username: <input type="text"`enter code here` name="usrname" id="username" oninput="checkUser(this.value);" maxlength="15">
&nbsp;&nbsp;<label id="maxReached" style="visibility: hidden; color:red">Your title is too long</label><br>
      <input type="submit" id="submit" value="Submit">
    </form> 
    </body>
    </html>

我把 maxlength="15" 只是为了给你看。希望它对你是正确的！如果您将 maxlength 设置为 10，您将看到它有效。我在javascript函数中添加了一个新行，如果您需要，如果条件不满足，脚本可以禁用提交按钮！ ;) 再见:)

【讨论】：

超级和我会补充，除了用红色文字“你的标题太长”和指出剩余字符数的指导之外，如何？
有几种方法。这是一个： - 在 javascript 函数的 if 部分中添加以下行：document.getElementById("maxReached").style.visibility = "visible"; - 在另一行的输入文本旁边添加：&nbsp;&nbsp;<label id="maxReached" style="visibility: hidden; color:red">Your title is too long</label> 我们添加了一个不可见的行，当字符数超过限制。当然，您必须在函数的 else 中添加一行，以使用 visibility="hidden" 让标签再次变得不可见
@user3831928 如果您有问题，我可以编辑上一个答案中的代码。
我希望你改变上一个答案
@user3831928 完成。希望这是你需要的！有点名声很受欢迎:)