Форум

artur2307 · #1 (**permalink**) 18.11.2022, 15:47

Дан инпут. В него вводится текст. Когда длина текста будет больше 5 символов, то фон инпута окрасить в желтый цвет. Помогите решить, очень сильно туплю. Буду благодарен.

ksa · #2 (**permalink**) 18.11.2022, 16:06

Сообщение от artur2307

очень сильно туплю

Где варианты твоего "тупления"?

рони · #3 (**permalink**) 18.11.2022, 16:08

artur2307,

<style type="text/css"> input:invalid {
  background-color: #FFFF00;
}
  </style>
<form>
    <input  type="text" pattern="\S{0,5}" />
</form>

есть ещё maxlength

artur2307 · #4 (**permalink**) 18.11.2022, 16:19

Сообщение от ksa

Где варианты твоего "тупления"?

html
<input type="text" value="" id="inp3">
js
let input = document.getElementById('inp3')
let yes = 'absde'
if(input.length >= yes.length){
input.style.backgroundColor = "yellow";
}

рони · #5 (**permalink**) 18.11.2022, 16:30

artur2307,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #6 (**permalink**) 18.11.2022, 16:35

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>

voraa · #7 (**permalink**) 18.11.2022, 16:54

<style type="text/css"> input:valid {
  background-color: #FFFF00;
}
  </style>
<form>
    <input  type="text" minlength="5" required>
</form>

Форум

Справочник

Discord чат

Курсы javascript