Событие onchange для Combobox (изменение стрелкми клавиатуры)
Здравствуйте!
Прошу помощи со скриптом. На страничке есть комбобокс со списком из 5 элементов. Если выбран элемент №5, должно появиться окошечко input. html: <select name="elemId" id="elemId"> <option value=""></option> <option value="1" id="elemId_1">пункт 1</option> <option value="2" id="elemId_2">пункт 2</option> <option value="3" id="elemId_3">пункт 3</option> <option value="4" id="elemId_4">пункт 4</option> <option value="5" id="elemId_5">пункт 5 (вписать)</option> </select> <div id ="txt"> <input type="text" name="txt" size="20" id="txt_input"> </div> Я повесила скрипт на изменение этого комбобокса:
function checkCombo(){
var el=document.getElementById("elemId");
var divTxt=document.getElementById("txt");
var inpTxt=document.getElementById("txt_input");
el.onchange=function (){
if(el.value!=5){
divTxt.style.display="none";
}else{
divTxt.style.display="block";
inpTxt.value="";
}
}
}
Выбирать значение из списка можно либо мышкой, либо клавишами (стрелочками). Проблема заключается в том, что в браузере FireFox onchange не срабатывает, если изменять значения в списке клавишами (при клике мышкой все работает). В хроме, опере и IE все отрабатывает нормально. Пока что, чтобы работало везде, повесила функцию проверки и на onchange, и на onkeyup. Подскажите, пожалуйста, можно ли решить эту проблему более грамотно? |
Manyasha,
Firefox ждёт onblur. Можно так сделать
<select name="elemId" id="elemId">
<option value=""></option>
<option value="1" id="elemId_1">пункт 1</option>
<option value="2" id="elemId_2">пункт 2</option>
<option value="3" id="elemId_3">пункт 3</option>
<option value="4" id="elemId_4">пункт 4</option>
<option value="5" id="elemId_5">пункт 5 (вписать)</option>
</select>
<div id="txt">
<input type="text" name="txt" size="20" id="txt_input">
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var el = document.getElementById("elemId");
var divTxt = document.getElementById("txt");
var inpTxt = document.getElementById("txt_input");
el.onchange = function () {
if (el.value != 5) {
divTxt.style.display = "none";
} else {
divTxt.style.display = "block";
inpTxt.value = "";
}
}
el.onkeyup = function (e) {
e.target.blur();
e.target.focus();
}
});
</script>
|
destus,
Такой особенности я не знала. Спасибо Вам большое за урок! Все прекрасно работает! |
| Часовой пояс GMT +3, время: 08:24. |