При передаче фокуса 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, время: 04:22. |