JavaScript

Здравствуйте, друзья! Нужна помощь в CSS3, HTML 5 и Java Script

Задача такая: нужно в поле input наложить ограничения на минимальное значение ввода и максимальное. Возьмем диапазон, да пустим min = 10, а max = 25, если в поле input вводишь значение 3 (это 3 < 10), то должен загореться красный индикатор в поле input, если введем к примеру 16, то загорается зеленый индикатор в поле input.
Очень буду благодарен за помощь!
КБ
Костя Бодачевский
113
Так, ну для начала ознакомьтесь со всеми возникающими событиями в input – learn.javascript.ru/events-change

Далее, я думаю с html и css вы сами разберётесь :)

Ну а js примерно такой (работает с учётом того, что DOM полностью загружен, т. е. скрипт делать обработчиком на DOMContentLoaded или просто пихнуть в конец <body>):

<script>

var input = document.querySelector('input');

/*css-селектор к <input /> в кавычках*/

input.oninput = check;

function check(){

if(isNaN(input.value) || input.value == '') return;

if(input.value > 10 && input.value <= 25) input.style.background = '#90ee90';

else input.style.background = '#f55';

/*здесь фон <input /> становится светлозелёным, если число больше 10 и меньше или равно 25. Если не попадает в этот диапазон, то фон становится яркокрасным*/

}

</script>

Как-то так!
Сергей Алейников
Сергей Алейников
1 988
Лучший ответ
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Документ</title>
<style>
.bad-value { background-color: #fff0f5; }
.good-value { background-color: #98fb98; }
</style>
<script>
/*global window, document */
'use strict';
window.addEventListener('load', function () {
var textbox = document.querySelector('#textbox');
function limiter(textbox, min, max) {
textbox.addEventListener('keyup', function () {
var value = Number.parseFloat(textbox.value);
if (value &&
value >= Number.parseFloat(min) &&
value <= Number.parseFloat(max)) {
textbox.classList.remove('bad-value');
textbox.classList.add('good-value');
} else {
textbox.classList.remove('good-value');
textbox.classList.add('bad-value');
}
});
}
limiter(textbox, 10, 25);
});
</script>
</head>
<body>
<div id="box">
<input type="text" id="textbox" class="bad-value">
</div>
</body>
</html>
СП
Слава Пуршев
66 111
Вешаете на onchange обработчик и проверяете.
Имя Фамилия
Имя Фамилия
39 979

Похожие вопросы