Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.11.2022, 15:47
Новичок на форуме
Отправить личное сообщение для artur2307 Посмотреть профиль Найти все сообщения от artur2307
 
Регистрация: 18.11.2022
Сообщений: 2

Дан инпут. В него вводится текст. Когда длина текста будет больше 5 символов, то фон
Дан инпут. В него вводится текст. Когда длина текста будет больше 5 символов, то фон инпута окрасить в желтый цвет. Помогите решить, очень сильно туплю. Буду благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 18.11.2022, 16:06
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,223

Сообщение от artur2307
очень сильно туплю
Где варианты твоего "тупления"?
Ответить с цитированием
  #3 (permalink)  
Старый 18.11.2022, 16:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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


есть ещё maxlength
Ответить с цитированием
  #4 (permalink)  
Старый 18.11.2022, 16:19
Новичок на форуме
Отправить личное сообщение для artur2307 Посмотреть профиль Найти все сообщения от artur2307
 
Регистрация: 18.11.2022
Сообщений: 2

Сообщение от 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 18.11.2022, 16:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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>
Ответить с цитированием
  #7 (permalink)  
Старый 18.11.2022, 16:54
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,750

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

Последний раз редактировалось voraa, 18.11.2022 в 17:26.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите исправить JQuery плагин для разделения UL на равные списки ozoro jQuery 12 25.10.2019 17:37
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Раскрывающийся список с объемными текстами morzer Общие вопросы Javascript 4 11.07.2016 14:54
Вопрос по относительному позиционированию DIV XPOMOB (X)HTML/CSS 11 15.07.2009 17:02