达到最大长度限制时更改输入字段样式
[英]Change input field style when reaches max length limit
问题描述
我创建了一个带有文本输入字段和maxlength设置的联系表单。 我希望当输入的字符大于10 ，然后使输入字段显示为红色。
<form action="contact.php">
Username: <input type="text" name="name" maxlength="10"><br>
<input type="submit" value="Submit">
</form>
3 个解决方案
解决方案1
4 2015-10-08 14:34:45
您可以在 CSS 中使用选择器 :invalid
input:invalid {
border: 1px solid #FF0000;
}
这将为所有输入元素提供红色边框，只要它们不符合条件（尽管如评论之一所述，输入字段中的字符数永远不能超过“maxlength”）。
解决方案2
1 2015-10-08 14:34:25
你可以使用这样的东西：
$("name[usrname]").change(function(){
if($(this).val().length > 10){
$(this).css("color","red");
}
});
解决方案3
1 2015-10-08 14:50:44
属性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">
<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 函数中添加了一个新行，允许脚本在条件不满足时禁用提交按钮，如果您需要它！ ;） 再见 ：）
解决方案4
0 2015-10-08 15:08:23
您可以使用jQuery .on()方法捕获keyup和change事件，
$(function () { $("input[type=text]").on("keyup change", function (e) { var maxLength = $(this).attr('maxlength'); if ($(this).val().length == maxLength) { $(this).css("color", "red"); } else { $(this).css("color", "black"); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <form action="contact.php"> Username: <input type="text" name="name" maxlength="10"><br> <input type="submit" value="Submit"> </form>
在angular应用中达到最大长度时如何防止输入字段上出现其他字符
[英]How to prevent additional characters on input field when max length reached in angular app
达到最大值和最小值时，防止多余的文本显示在输入中
[英]Prevent extra text from showing in input when it reaches the min and max values
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.