Меню
Что нового?

Выделение цветом пустого поля ввода

Mak

Новичок
Выделение цветом пустого поля ввода

Есть поля ввода, средствами javascript нужно, чтобы обрабатывалось следующее событие, когда поля ввода пустые, то фон поля ввода определенного цвета, а как только текст был введен цвет менядся на другой.

Подскажите плиз как сделать.
 

Кром

Новичок
Вешаешь на поле обработчик события, например onKeyPress() и проверяешь, есть ли там что нибудь или нет.
В любом он-лайн самоучителе написано как это делать.
 

Mak

Новичок
спасиб, а не подкинешь ссылку на такой самоучитель....

-~{}~ 10.03.05 20:22:

Или правильнее будет так, если поля ввода пустые то фон белый, если не пустые то красный и желательно чтобы это сохранялось при переходе между страницами т.к. форма большая и заполняется в несколько этапов.
 

Кром

Новичок
>спасиб, а не подкинешь ссылку на такой самоучитель....

Поищи "JavaScript для мага". Старенький, но вполне подойдет для начала. Очень неплохой курс.
Остальное можешь найти на msdn.com
 

Mak

Новичок
делаю так...

<input type="text" name="text" onKeyPress="if (this.value.empty = true) { this.style.border = '1px solid #000000' }"; style="border: 1px solid red;">

но оно не работает при обновлении страницы, как только страница обновляется, поле ввода подсвечивается опять красным, хотя данные введены, что не правильно?
 

Mak

Новичок
2 IBSN
как это работает с трудом осмысливаю т.к. не особо секу в js

а если я так напишу, это будет правильно?
<input type="text" name="text" onKeyPress="if (this.value.empty = true) { this.style.border = '1px solid #000000' } else { this.style.border = '1px solid red' };">
 

IBSN

Новичок
Код: 
<script>
function isNotEmpty(elemId) {
	var elem = document.getElementById(elemId);
	var str = elem.value;
	var re = /.+/;
	if(!str.match(re)) {
		elem.style.border = '1px solid red';
		return false;
	} else {
		elem.style.border = '1px solid black';
		return true;
	}
}
</script>
<body onload="isNotEmpty('str')">
<input type="text" id="str" name="text" onkeyup="isNotEmpty(this.id)"> 
</body>
 

Mak

Новичок
2 IBSN:
Спасибо тебе, выручил!

И последний вопрос, а если я хочу использовать в форме несколько input?
 
crocodile2u

crocodile2u

http://vbolshov.org.ru
Хочешь - используй! Нужно всего лишь своей головой понять то, что анписал тебе IBSN.
 

Mak

Новичок
2 crocodile2u :
ну я примерно осмыслил, но видимо не доконца, очень уж плохо я знаю этот js

<script>
function isNotEmpty(elemId) {
var elem = document.getElementById(elemId);
var str = elem.value;
var re = /.+/;
if(!str.match(re)) {
elem.style.border = '1px solid red';
return false;
} else {
elem.style.border = '1px solid black';
return true;
}
}
</script>
<body onload="isNotEmpty('str')">
<input type="text" id="str1" name="text1" onkeyup="isNotEmpty(this.id)">
<input type="text" id="str2" name="text2" onkeyup="isNotEmpty(this.id)">
<input type="text" id="str3" name="text3" onkeyup="isNotEmpty(this.id)">
<input type="text" id="str4" name="text4" onkeyup="isNotEmpty(this.id)">
</body>

это я понимаю чушь....
 
crocodile2u

crocodile2u

http://vbolshov.org.ru
Ну почему же чушь?

Единственное, что я бы предложил поменять, так это передавать параметром в функцию не ID элемента, а сам элемент.

Будет:
PHP: 
<script>
function isNotEmpty(elem) {
    var str = elem.value;
    var re = /.+/;
    if(!str.match(re)) {
        elem.style.border = '1px solid red';
        return false;
    } else {
        elem.style.border = '1px solid black';
        return true;
    }
}
</script>
<body>
<input type="text" id="str1" name="text1" onkeyup="isNotEmpty(this)">
<input type="text" id="str2" name="text2" onkeyup="isNotEmpty(this)">
<input type="text" id="str3" name="text3" onkeyup="isNotEmpty(this)">
<input type="text" id="str4" name="text4" onkeyup="isNotEmpty(this)">
</body>
А вот событие onload в body ты обрабатывал неправильно.

Применительно к данному конкретному случаю я бы написал:
PHP: 
function initBorders() {
    var max=4;
    for (i=1; i <= max; ++i) {
        elem = document.getElementById('str'+i);
        isNotEmpty(elem);
    }
}
<body onload="initBorders();">
 

Jew

Guest
Автор оригинала: Mak
а если я так напишу, это будет правильно?
<input type="text" name="text" onKeyPress="if (this.value.empty = true) { this.style.border = '1px solid #000000' } else { this.style.border = '1px solid red' };">
Нажмите для раскрытия...
тоже правильно, только (this.value.empty )== true

-~{}~ 20.03.05 15:11:

И еще можно проверочку браузера устроить

function GetElementById(id){
if (document.getElementById) {
return (document.getElementById(id));
} else if (document.all) {
return (document.all[id]);
} else {
if ((navigator.appname.indexOf("Netscape") != -1) && parseInt(navigator.appversion == 4)) {
return (document.layers[id]);
}
}
}
 
Войдите или зарегистрируйтесь для ответа.
Сверху