При передаче фокуса 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); Кто сталкивался с такой проблемой, подскажите в чем причина. |
Примерчик запускаемый сделай.
|
Цитата:
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 сработает правильно. Можете подсказать в чем проблема? |
Погугли datalist polyfill:
<input type="text" list="options" />
<datalist id="options">
<option value="Петров" />
<option value="Сидоров" />
<option value="Петренко" />
<option value="Петрущенко" />
<option value="Иванов" />
</datalist>
|
Цитата:
Мне желательно разобраться со своим вариантом. Есть по моему вопросу какие-то соображения? Как исправить косяк с select? Подскажите хотя бы из-за чего возникает проблема в select |
Решил пойти другим путем, вместо select использовал группу div c tabindex="-1". Но и тут нарвался на мелкое неудобство: при нажатии на "стрелка вниз" или "стрелка вверх" фокус происходит на нужном диве, но при этом прокручивается страница (соответственно когда контента больше высоты окна). Пожалуйста, хотя бы в этом подскажите, КАК ЭТОГО ИЗБЕЖАТЬ?????????
preventDefault и return false; не помогают. |
Цитата:
|
klk.pma,
event.stopPropagation(); |
Цитата:
|
Вот мой код:
<!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>
Как отловить эти гадские кнопки? Кто сталкивался с подобной проблемой подскажите как решить. |
| Часовой пояс GMT +3, время: 17:17. |