HTML+CSS+JavaScript

текстовое поле принимает цвет в зависимости от того какие данные вводит пользователь.
например

<input type="text" class="reg_input" id="login" onFocus="CheckLogin();">

function CheckLogin() {         var error = '#ff3333';     var ok = '#cccccc';     var element = document.getElementById('login');     var len = element.value.length;          if (len > 0)     {         if (((len) < 3) || ((len) > 10))         {             element.style.borderColor = error;         }         else          {             element.style.borderColor = ok;         }         }     setTimeout("CheckLogin()",1000); }

вопрос такой: как отключить таймер после того как поле будет деактивировано? то есть как правильно прикрутить clearTimeout? (что-то с событием onBlur не получалось)
и вообще стоит ли его отключать?

<script> var S = 0; //test function CheckLogin () { document.getElementById ('test').innerHTML = S++; //test var er = '#ff3333',  el = document.getElementById ('login'), ln = el.value.length; el.style.borderColor = (ln > 2 && ln < 11) ? '' : ((ln) ? er : ''); TM = setTimeout (CheckLogin, 10); } </script> <input class="reg_input" id="login" onfocus="CheckLogin ()" onblur="clearTimeout (TM)"> <!-- //test --><div id="test"></div><!-- //test -->

PS1. Выделенное жирно после тестирования уберите.
PS2. Чтобы во всех браузерах вернуть исходный (по умолчанию) цвет бордера инпута, надо давать цвету бордера пустое значение.

спасибо за ответ! все работает. но скажите пожалуйста, если бы я его не отключил, были бы какие-нибудь последствия?

Разумеется, желательно ненужную работу не делать - это "облегчит" деятельность парсера браузера и прочие операции не будут тормозить.
Но могут быть и ошибки - если не отключать.
Например, в том виде, в котором я привёл код (с тестовыми вставками) со временем значение переменной S превысило бы максимально допустимую величину и браузер приостановил действие скриптов на странице (а то бы и завис вовсе).

все ясно. познавательно. спасибо Вам

и еще, такой вопрос по теме...допустим у меня в текущем документе выводится форма авторизации и регистрации. то есть поле логин используется 2-х формах. каким образом реализовать вышеприведенные функции не прибегая к их дублированию для одинаковых полей? почему-то если id элемента передавать функции, то при выполнении setTimeout это значение теряется....

то есть пробую скажем

<input type="text" class="reg_input" id="login" onFocus="CheckLogin('login');"> function CheckLogin(el) {         var error = '#ff3333';     var element = document.getElementById(el);     var len = element.value.length;          if (len > 0)     {         if (((len) < 3) || ((len) > 10))         {             element.style.borderColor = error;         }         else          {             element.style.borderColor = '';         }         }     setTimeout("CheckLogin(el)",1000); // здесь значение теряется.... }

Прямо как в анекдоте, где ОБХСС допрашивает богатенького:

- Где берёте деньги на такую шикарную жизнь, Абрам? - Из тумбочки. В спальне. - А кто в тумбочку кладёт? - Сара, жена моя. - В она откуда деньги берёт? - Я ей даю. - Ну так откуда же вы их берёте? - Я уже отвечал на этот вопрос, гражданин начальник: деньги я беру из тумбочки :-))

Посмотрите ВНИМАТЕЛЬНО на свой код - чему у вас равна переменная el ?
Переменная el - это у вас как раз "деньги", а функция CheckLogin - та самая "тумбочка".
Ну а вы - Абрам и Сара "в одном флаконе" :-))
Хи-хи...


PS. Будете исправлять, имейте в виду - setTimeout работает только с ГЛОБАЛЬНЫМИ переменными.
Т.е., например, если ВНУТРИ функции у вас определяется какая либо ЛОКАЛЬНАЯ переменная (созданная при помощи декларации var), то таковая переменная действует только ВНУТРИ функции и только в пределах ОДНОГО захода в эту функцию. Отправите её значение методом setTimeout в другую функцию (или в эту же) - НИЧЕГО там не получите, ибо локальная переменная "умирает" сразу после закрывающей фигурной скобки функции, коя следует за строкой с методом setTimeout.
Ферштейн?

ферштейн, анекдот Ваш только запутал)))

var glob_el; function CheckLogin(el) {     var element = document.getElementById(el);     var len = element.value.length;             glob_el = el;          if (len > 0)     {         if (((len) < 3) || ((len) > 10))         {             element.style.borderColor = error;             login = false;             onRegister();         }         else          {             element.style.borderColor = '';             login = true;             onRegister();         }         }     else      {         element.style.borderColor = '';     }     timeout = setTimeout("CheckLogin(glob_el)",CheckInterval); }

так работает, скажите пожалуйста, с точки зрения Сары и Абрама такой подход правильный?)))

Абрам - на зоне парится. Из-за тумбочки.
А вот Сара просила вам передать, что подход ваш неправильный.
ГЛОБАЛЬНАЯ переменная для того и нужна, чтобы её в качестве аргумента функции НЕ ПЕРЕДАВАТЬ.

<script> var S = []; S ['login_1'] = S ['login_2'] = 0 //test var OBJ, TIM; function CheckLogin () { var err = '#ff3333', len = OBJ.value.length; OBJ.style.borderColor = (len > 2 && len < 11) ? '' : ((len) ? err : ''); TIM = setTimeout (CheckLogin, 10); document.getElementById ('test_' + OBJ.id).innerHTML = S [OBJ.id]++; //test } </script> <input class="reg_input" id="login_1" onfocus="OBJ = this; CheckLogin ()" onblur="clearTimeout (TIM)"> <p> <input class="reg_input" id="login_2" onfocus="OBJ = this; CheckLogin ()" onblur="clearTimeout (TIM)"> <hr> <!-- //test --><br>login_1 : <span id="test_login_1"></span><!-- //test --> <!-- //test --><br>login_2 : <span id="test_login_2"></span><!-- //test -->

PS. Кстати, у вас в CSS в классе reg_input установлен стиль для бордера, отличный от inset или outset?
Дело в том, что дефолтный стиль бордера (outset) OPERA понимает только c родным цветом - сероватым, а красным цветом OPERA такой бордер не отобразит.
И вообще лучше, на мой взгляд, менять фон, а не бордер.
Не знаю, что у вас там за цветовая гамма на странице, но мне видится, например, такой вариант:

var err = '#FF9F9F',... OBJ.style.backgroundColor = ...

спасибо за ответ. но опять таки, чем чревата передача глобальной переменной? ошибок никаких не возникает. и еще, что значит OBJ = this? в OBJ закидываем id?
кстати опера отображает нормально....

document.getElementById ('test_' + OBJ.id).innerHTML = S [OBJ.id]++; //test

вот этот участок не выполняется...

в любом случае, PAT, спасибо большое что откликнулись и помогли, Ваш вариант намного лучше и удобнее.

>что значит OBJ = this? в OBJ закидываем id?

Слово this буквально переводится как ЭТО, ЭТОТ.
Инструкция OBJ = this написана внутри тега <INPUT> и расшифровывается буквально так:
"глобальной переменной под именем OBJ присвоить значением ЭТОТ тег" (не только его id, а весь тег, как объект, имеющий много разных свойств, в том числе одним из свойств является id этого тега).


>вот этот участок не выполняется...

Врёте! Всё работает.
Сохраните код AS IS (т.е. именно так, как он написан, БЕЗ ЕДИНОГО вашего исправления или дополнения) и ВСЁ будет работать. Не надо ни <HTML>, ни <BODY>, ни <FORM> - вообще ничего не надо добавлять или куда-то вовнутрь другого кода вставлять. Запустите в браузере только приведённый выше код.
А вот ПОТОМ, удостоверившись, что AS IS работает, крутите и вертите код как хотите (понимая, что появляющиеся при "кручении" кода ошибки будут уже не мои, а ваши).

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