Я создал контактную форму с текстовым полем ввода и maxlength. Я желаю, чтобы, когда символы ввода больше 10, затем введите поле ввода для отображения красным цветом.Изменение стиля поля ввода при достижении максимального предела длины
<form action="contact.php">
Username: <input type="text" name="name" maxlength="10"><br>
<input type="submit" value="Submit">
</form>
Вы можете использовать что-то вроде этого:
$("name[usrname]").change(function(){
if($(this).val().length > 10){
$(this).css("color","red");
}
});
Вы можете использовать селектор: недопустимый в вашем CSS
input:invalid {
border: 1px solid #FF0000;
}
Это даст все ваши элементы ввода красную границу, когда они не соответствуют критериям (хотя, как указано в одном из комментариев, количество символов в вашем поле ввода никогда не может превышать «maxlength»).
Где я добавил класс недействительным в javaScript? – user3831928
На самом деле TylerH прав, а maxlength Ограничивает количество символов, которые вы можете ввести, поэтому вам придется пойти с решением Matheus208 и использовать jQuery (или JavaScript в зависимости от того, что вы предпочитаете). Я поправлю свой ответ. – Fuzzzzel
Атрибут 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, которая позволяет скрипту отключить кнопку отправки, если условие не выполняется, если вам это нужно! ;) Bye :)
Супер и я бы добавил, помимо коучинга в красном тексте «Твой заголовок слишком длинный» и укажите количество оставшихся символов, как? – user3831928
Существует несколько способов. Вот один из них: -Добавьте в if-часть функции javascript следующую строку: 'document.getElementById (" maxReached "). Style.visibility =" visible ";' -Добавить рядом с введенным текстом эту другую строку : ' ' Мы добавили невидимую строку, которая отображается, когда количество символов превышает лимит. Конечно, вы должны добавить в функцию _else_ f функцию, чтобы метка снова стала невидимой с 'visibility =" hidden "' – Marco
@ user3831928, если у вас есть проблемы, я могу редактировать код в предыдущем ответе. – Marco
Вы можете использовать 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>нормально, но я не контролирую jQuery – user3831928
Он по-прежнему может помочь другим посетителям. – Stickers
Очень приятно спасибо marco – user3831928
Это невозможно, потому что он не допустит текст длиннее maxlength в первую очередь. – TylerH