【问题标题】: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"; - 在另一行的输入文本旁边添加:&amp;nbsp;&amp;nbsp;&lt;label id="maxReached" style="visibility: hidden; color:red"&gt;Your title is too long&lt;/label&gt; 我们添加了一个不可见的行,当字符数超过限制。当然,您必须在函数的 else 中添加一行,以使用 visibility="hidden" 让标签再次变得不可见
    • @user3831928 如果您有问题,我可以编辑上一个答案中的代码。
    • 我希望你改变上一个答案
    • @user3831928 完成。希望这是你需要的!有点名声很受欢迎:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-29
    • 1970-01-01
    • 1970-01-01
    • 2021-07-13
    • 1970-01-01
    • 2014-03-08
    相关资源
    最近更新 更多