Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.02.2016, 16:44
Профессор
Отправить личное сообщение для Manyasha Посмотреть профиль Найти все сообщения от Manyasha
 
Регистрация: 21.09.2015
Сообщений: 196

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

Подскажите, пожалуйста, можно ли решить эту проблему более грамотно?
Ответить с цитированием
  #2 (permalink)  
Старый 29.02.2016, 17:47
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

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>
Ответить с цитированием
  #3 (permalink)  
Старый 29.02.2016, 17:59
Профессор
Отправить личное сообщение для Manyasha Посмотреть профиль Найти все сообщения от Manyasha
 
Регистрация: 21.09.2015
Сообщений: 196

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие по нажатии двух клавиш клавиатуры. lancer Events/DOM/Window 11 08.01.2017 14:11
событие для объекта Д-3210 Общие вопросы Javascript 4 15.12.2010 10:31
Изменение скрипта в программе для тестирования. Alex2030 Работа 0 26.11.2009 07:38
Изменение скрипта в программе для тестирования. Alex2030 Общие вопросы Javascript 2 26.11.2009 07:30
Как отловить событие onchange на LookUp поле? spps Events/DOM/Window 0 09.09.2008 16:02