Дан инпут. В него вводится текст. Когда длина текста будет больше 5 символов, то фон
Дан инпут. В него вводится текст. Когда длина текста будет больше 5 символов, то фон инпута окрасить в желтый цвет. Помогите решить, очень сильно туплю. Буду благодарен.
|
Цитата:
|
artur2307,
<style type="text/css"> input:invalid {
background-color: #FFFF00;
}
</style>
<form>
<input type="text" pattern="\S{0,5}" />
</form>
есть ещё maxlength |
Цитата:
<input type="text" value="" id="inp3"> js let input = document.getElementById('inp3') let yes = 'absde' if(input.length >= yes.length){ input.style.backgroundColor = "yellow"; } |
artur2307,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
artur2307,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
input.invalid {
background-color: #FFFF00;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let input = document.getElementById('inp3');
let yes = 'absde';
input.addEventListener("input", function() {
input.classList.toggle("invalid", input.value.length > yes.length)
})
})
</script>
</head>
<body>
<input type="text" value="" id="inp3">
</body>
</html>
|
<style type="text/css"> input:valid {
background-color: #FFFF00;
}
</style>
<form>
<input type="text" minlength="5" required>
</form>
|
| Часовой пояс GMT +3, время: 13:41. |