Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2015, 20:20
Интересующийся
Отправить личное сообщение для klk.pma Посмотреть профиль Найти все сообщения от klk.pma
 
Регистрация: 30.06.2014
Сообщений: 23

При передаче фокуса select`у и выборе определенного option возникает трудность
Добрый день!

При передаче фокуса от input к select вот таким кодом:
if(event.keyCode==40) {
	var vsel=document.getElementById("listfam");
	vsel.focus();  //передача фокуса select
	if(vsel.selectedIndex==-1) vsel.selectedIndex=0;  //отметить первый в списке option
   }

я попутно отмечаю первый option в select`e. Задача селекта - найти в нем нужный пункт и при нажатии enter или click, передать значение option в другой элемент.
if(event.keyCode==13) document.getElementById("inpfam").value=name;

И тут сталкиваюсь с проблемой: если сразу после получения фокуса выбран option[0] и нажать enter, то указанный option не передается. Даже при проверке alert`om ничего не происходит:
if(vsel.selectedIndex==-1) alert(vsel.selectedIndex);


Кто сталкивался с такой проблемой, подскажите в чем причина.

Последний раз редактировалось klk.pma, 23.01.2015 в 20:56.
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2015, 22:03
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Примерчик запускаемый сделай.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 28.01.2015, 19:54
Интересующийся
Отправить личное сообщение для klk.pma Посмотреть профиль Найти все сообщения от klk.pma
 
Регистрация: 30.06.2014
Сообщений: 23

Сообщение от danik.js Посмотреть сообщение
Примерчик запускаемый сделай.
Вот пример. Проблема в нем такая:
1 ВАРИАНТ: вводится любой символ, нажимается стрелка вниз, нажимаем enter и получаем пустое поле (а должно быть значение Петров);
2 ВАРИАНТ: если ввести символ, нажать 2 раза стрелку вниз и нажать enter в поле появится правильное значение (это правильная работа скрипта).

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="windows-1251">
  <style>
    .cla {width:450px}
  </style>
</head>
<body>
<form method="post" action="" name="addedit" class="cla">
  <div>
    Фамилия
    <div>
      <input id="addfam" type="text" name="fam" maxlength="50" value="" onkeyup="strlist(this.value);">
      <select id="listfam" name="listfam" size="5" style="width:450px; display:none;" onclick="inpstr(this.value);" onkeyup="inpstr13(this.value);"></select>
    </div>
  </div>
</form>

<script>
function strlist(famn) {
	if(event.keyCode==40) {
		var vsel=document.getElementById("listfam");
		vsel.focus();	//передача фокуса select
		if(vsel.selectedIndex==-1) vsel.selectedIndex=0;	//отметить первый в списке option
	} else {
		var result=['Петров', 'Сидоров', 'Петренко', 'Петрущенко', 'Иванов']; 	//сюда поставляется массив данных - заполнен для примера
		if(result && result!='') {
			document.getElementById("listfam").style.display='';
	    		var list=document.getElementById("listfam");
			list.length=0;
			for(var i=0;i<result.length;i++) list[i]=new Option(result[i]);
		} else document.getElementById("listfam").style.display='none';
	}
}
function inpstr(famn) {
	document.getElementById("addfam").value=famn;
	document.getElementById("listfam").style.display='none';
}
function inpstr13(famn) {
	window.captureEvents(Event.KEYPRESS);	//перехват события нажатия клавиши (для некоторых браузеров)
	window.onkeypress=pressed;		//событие при нажатии клавиш
	function pressed(e) {
		if(e.which==13) {		//если нажат enter
			e.preventDefault(); 	//отмена действия браузера по умолчанию (отправка формы)
		}
	}
	if(event.keyCode==13) {
		document.getElementById("addfam").value=famn;
		document.getElementById("listfam").style.display='none';
	}
}
</script>
</body>
</html>


Кстати, есть один нюанс: если сначала применить 2 ВАРИАНТ, а затем 1 ВАРИАНТ, то enter сработает правильно.

Можете подсказать в чем проблема?

Последний раз редактировалось klk.pma, 28.01.2015 в 20:17.
Ответить с цитированием
  #4 (permalink)  
Старый 28.01.2015, 22:44
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Погугли datalist polyfill:

<input type="text" list="options" />
<datalist id="options">
    <option value="Петров" />
    <option value="Сидоров" />
    <option value="Петренко" />
    <option value="Петрущенко" />
    <option value="Иванов" />
</datalist>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 29.01.2015, 09:31
Интересующийся
Отправить личное сообщение для klk.pma Посмотреть профиль Найти все сообщения от klk.pma
 
Регистрация: 30.06.2014
Сообщений: 23

Сообщение от danik.js Посмотреть сообщение
Погугли datalist polyfill
Datalist хороший вариант, но есть проблема, как сделать его доступным во всех браузерах без подключения дополнительных файлов (хотя бы без jQuery)?
Мне желательно разобраться со своим вариантом. Есть по моему вопросу какие-то соображения?
Как исправить косяк с select? Подскажите хотя бы из-за чего возникает проблема в select

Последний раз редактировалось klk.pma, 29.01.2015 в 10:07.
Ответить с цитированием
  #6 (permalink)  
Старый 30.01.2015, 11:25
Интересующийся
Отправить личное сообщение для klk.pma Посмотреть профиль Найти все сообщения от klk.pma
 
Регистрация: 30.06.2014
Сообщений: 23

Решил пойти другим путем, вместо select использовал группу div c tabindex="-1". Но и тут нарвался на мелкое неудобство: при нажатии на "стрелка вниз" или "стрелка вверх" фокус происходит на нужном диве, но при этом прокручивается страница (соответственно когда контента больше высоты окна). Пожалуйста, хотя бы в этом подскажите, КАК ЭТОГО ИЗБЕЖАТЬ?????????
preventDefault и return false; не помогают.
Ответить с цитированием
  #7 (permalink)  
Старый 30.01.2015, 11:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от klk.pma
но при этом прокручивается страница
отмените всплытие события.
Ответить с цитированием
  #8 (permalink)  
Старый 30.01.2015, 11:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

klk.pma,
event.stopPropagation();
Ответить с цитированием
  #9 (permalink)  
Старый 30.01.2015, 18:19
Интересующийся
Отправить личное сообщение для klk.pma Посмотреть профиль Найти все сообщения от klk.pma
 
Регистрация: 30.06.2014
Сообщений: 23

Сообщение от рони
отмените всплытие события
Все равно прокручивается страница
Ответить с цитированием
  #10 (permalink)  
Старый 30.01.2015, 18:28
Интересующийся
Отправить личное сообщение для klk.pma Посмотреть профиль Найти все сообщения от klk.pma
 
Регистрация: 30.06.2014
Сообщений: 23

Вот мой код:
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="windows-1251">
  <style>
    #li2 {border:1px solid gray}
    .cla {width:450px}
    .dlist:focus {background:gray; outline:none;}
  </style>
</head>
<body style="height:2000px">

<form method="post" action="" name="addedit" class="cla">
  <div>
    Фамилия
    <div>
      <input id="addfam" type="text" name="fam" maxlength="50" value="" onkeyup="strlist(this.value,event);" placeholder="Фамилия">
      <div id="li2" style="width:450px; display:none;"></div>
    </div>
  </div>
</form>

<script>
function strlist(famn,event) {
	event=event||window.event;
	event.preventDefault();
	event.stopPropagation();
	if(event.keyCode==40) {
		document.getElementById("l1").focus();
	} else {
		var result='<div tabindex="-1" id="l1" class="dlist" onkeyup="inpstr13(this,event);">Петров</div><div tabindex="-1" id="l2" class="dlist" onkeyup="inpstr13(this,event);">Сидоров1</div><div tabindex="-1" id="l3" class="dlist" onkeyup="inpstr13(this,event);">Сидоров2</div><div tabindex="-1" id="l4" class="dlist" onkeyup="inpstr13(this,event);">Сидоров3</div><div tabindex="-1" id="l5" class="dlist" onkeyup="inpstr13(this,event);">Сидоров4</div><div tabindex="-1" id="l6" class="dlist" onkeyup="inpstr13(this,event);">Сидоров5</div><div tabindex="-1" id="l7" class="dlist" onkeyup="inpstr13(this,event);">Сидоров6</div>';
		if(result && result!='') {
			document.getElementById("li2").style.display='';
	    		document.getElementById("li2").innerHTML=result;
		} else document.getElementById("li2").style.display='none';
	}
}
function inpstr13(famn,event) {
	event=event||window.event;
	tekp=parseInt(famn.id.replace(new RegExp("^l",'g'),""));
	if(event.keyCode==40) {
		event.preventDefault();
		event.stopPropagation();
		tekp="l"+(tekp+1);
		document.getElementById(tekp).focus();
		return false;
	} else if(event.keyCode==38 && tekp!=1) {
		event.preventDefault();
		event.stopPropagation();
		tekp="l"+(tekp-1);
		document.getElementById(tekp).focus();
		return false;
	} else if(event.keyCode==13) {
		document.getElementById("addfam").value=famn.innerHTML;
		document.getElementById("li2").style.display='none';
	}
}
</script>
</body>
</html>

Как отловить эти гадские кнопки? Кто сталкивался с подобной проблемой подскажите как решить.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обновление значения переменной при выборе определенного value MaximS AJAX и COMET 4 24.12.2013 08:56
Открытие полей формы при выборе определенного radio gvelisperi Internet Explorer 1 15.12.2013 03:30
Открытие полей формы при выборе определенного radio rolph Events/DOM/Window 4 15.06.2010 18:32
При выборе определенного option => событие FRIE jQuery 2 05.03.2010 11:40
раскрывать/скрывать <td> при выборе определенного элемента списка zip Элементы интерфейса 2 19.01.2009 13:58