Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Событие onchange для Combobox (изменение стрелкми клавиатуры) (https://javascript.ru/forum/events/61662-sobytie-onchange-dlya-combobox-izmenenie-strelkmi-klaviatury.html)

Manyasha 29.02.2016 16:44

Событие 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.

Подскажите, пожалуйста, можно ли решить эту проблему более грамотно?

destus 29.02.2016 17:47

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>

Manyasha 29.02.2016 17:59

destus,
Такой особенности я не знала.
Спасибо Вам большое за урок! Все прекрасно работает!


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