Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   стили input при событии onFocus (https://javascript.ru/forum/dom-window/10503-stili-input-pri-sobytii-onfocus.html)

SerjRamone 07.07.2010 13:26

стили input при событии onFocus
 
Здравствуйте. В JavaScript только начинаю разбираться, и вот возникла проблема.
Код функции:
function func_onFocus(obj){
  
	//alert('123');
	//alert(obj);
	
	if (obj == "credit_size_radio"){
	
		document.forms["CForm"].elements["sale_price"].style.backgroundColor = "#DEDEE0";
		document.forms["CForm"].elements["down_percent"].style.backgroundColor = "#DEDEE0";
		document.forms["CForm"].elements["credit_size"].style.backgroundColor = "#DEDEE0";
		document.forms["CForm"].elements["overpayment"].style.backgroundColor = "#DEDEE0";		
		//onkeydown="return false;"	
	}


часть формы:
<input name="calculation_kind" type="radio" value="monthly_payment_radio" onFocus="func_onFocus(this.value);" checked="checked"><label for="calculation_kind">Ежемесячные выплаты</label><br>


в чем ошибка? при выборе элемента ничего не происходит.
Заранее всем спасибо))

pandasensey 07.07.2010 13:54

приведенный пример формы действительно не будет работать, хотя бы потому, что у кнопки calculation_kind значение monthly_payment_radio, а вы передаете именно это значение и при проверке
if (obj == "credit_size_radio")
(где, кстати, лучше использовать "===" для сравнения со строкой) естественно ничего не происходит. Можно более подробный код?

SerjRamone 07.07.2010 14:31

Цитата:

потому, что у кнопки calculation_kind значение monthly_payment_radio, а вы передаете именно это значение и при проверке
Ну это я не ту строчку скопировал. Извините.

Код подробнее:
function func_onFocus(obj){
	
	if (obj == "credit_size_radio"){
	
		document.forms["CForm"].elements["sale_price"].style.backgroundColor = "#DEDEE0";
		document.forms["CForm"].elements["down_percent"].style.backgroundColor = "#DEDEE0";
		document.forms["CForm"].elements["credit_size"].style.backgroundColor = "#DEDEE0";
		document.forms["CForm"].elements["overpayment"].style.backgroundColor = "#DEDEE0";		
	}
	
	if (obj == "year_term_radio"){
	
		document.forms["CForm"].elements["credit_size"].style.backgroundColor = "#DEDEE0";
		document.forms["CForm"].elements["overpayment"].style.backgroundColor = "#DEDEE0";
		document.forms['CForm'].elements['year_term'].style.backgroundColor = '#DEDEE0'; 
		
	}
	
	if (obj == "monthly_payment_radio"){
	
	document.forms['CForm'].elements['monthly_payment'].style.backgroundColor = '#DEDEE0'; 
	document.forms['CForm'].elements['credit_size'].style.backgroundColor = '#DEDEE0'; 
	document.forms['CForm'].elements['overpayment'].style.backgroundColor = '#DEDEE0';
	
	}
  }  
 
 
 
 }



<td width="100%" align="left" colspan="2">
	 <input name="calculation_kind" type="radio" value="monthly_payment_radio" onFocus="func_onFocus(this.value);" checked="checked"><label for="calculation_kind">Ежемесячные выплаты</label><br>
	 <input name="calculation_kind" type="radio" value="credit_size_radio" onFocus="func_onFocus(this.value);"><label for="calculation_kind">Сумма кредита</label><br>
	 <input name="calculation_kind" type="radio" value="year_term_radio" onFocus="func_onFocus(this.value);"><label for="calculation_kind">Период кредитования</label>
	</td>

pandasensey 07.07.2010 15:21

1.
В вашем случае для проверки значения лучше использовать оператор switch:
switch (obj) {
  case 'credit_size_radio':
    //Тут действия
  break;
  case 'year_term_radio':
    //Тут действия
  break;
  case 'monthly_payment_radio':
    //Тут действия
  break;
}

2. Если не выполняется само событие (это можно проверить, добавив alert в первую строчку функции), то попробуйте изменить onFocus на onClick
3. Если событие выполняется, но ничего не изменяется, попробуйте обращаться к элементам по их id (предварительно задайте id каждому элементу формы идентичный имени) чтобы было примерно так:
<input name="overpayment" id="overpayment"/>

В этом случае обращаться вы к нему будете через
document.getElementById('overpayment')

SerjRamone 07.07.2010 15:36

Цитата:

2. Если не выполняется само событие (это можно проверить, добавив alert в первую строчку функции), то попробуйте изменить onFocus на onClick
function func_onFocus(obj){
	   
	    alert('123');
.......


onClick тоже не работает, да и оно не подошло бы потому что выбрать можно и не кликнув мышью а переместившись с помощью клавиатуры.
алерт добавил, тоже не работает.

а вот так работает:
<input name="calculation_kind" type="radio" value="monthly_payment_radio" onFocus="alert('123')" checked="checked"><label for="calculation_kind">Ежемесячные выплаты</label><br>

SerjRamone 07.07.2010 15:54

всё, разобрался.. ошибка была глупая.. pandasensey, спасибо большое ))

subzey 08.07.2010 01:34

<style type="text/css">
input {background: white}
input:focus {background: yellow}
</style>
<input /><input /><input />
Для нормальных браузеров :)

pandasensey 08.07.2010 12:32

subzey, во-первых, насколько я понял, там задача была при нажатии на radio, отмечать группы инпутов. А во-вторых, трудно доказать Microsoft'у, что они выпускают из года в год ненормальные броузеры, а по гугл аналитиксу, это один из самыз популярных броузеров инета:)

SerjRamone 08.07.2010 12:47

Цитата:

subzey, во-первых, насколько я понял, там задача была при нажатии на radio, отмечать группы инпутов. А во-вторых, трудно доказать Microsoft'у, что они выпускают из года в год ненормальные броузеры, а по гугл аналитиксу, это один из самыз популярных броузеров инета
Совершенно верно :)

Hagrael 08.07.2010 13:13

А разве нельзя в стилях указать :focus ?)))


Часовой пояс GMT +3, время: 22:29.