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

[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;">

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

 

[IBSN]

что не правильно?

всё правильно. ты вообще осмыслеваешь, что и зачем ты делаешь, и как это работает?

 

[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]

Хочешь - используй! Нужно всего лишь своей головой понять то, что анписал тебе 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]

Ну почему же чушь?

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

Будет:

<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 ты обрабатывал неправильно.

Применительно к данному конкретному случаю я бы написал:

function initBorders() {
    var max=4;
    for (i=1; i <= max; ++i) {
        elem = document.getElementById('str'+i);
        isNotEmpty(elem);
    }
}
<body onload="initBorders();">

 

[Jew]

Автор оригинала: 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]);
}
}
}