Форум

Демьян · #1 (**permalink**) 16.04.2011, 19:49

Привет!

Заметил, что если при загрузке страницы с сервера слой невидим то после включения видимости этого слоя средствами JS невозможно передать фокус текстовому полю формы, которое в этом слое содержится.

Код примерно такой:

<form id="form" name="form">

<select name="spisok" id="spisok" style="width: 155px;"
 onclick="
/* если выбран 1-й вариант из списка - включить слой "div" и передать фокус полю внутри него, иначе скрыть слой "div" */
if (this.value == '1' ) { document.getElementById('div').style.display = 'inline'; } 
else {document.getElementById('div').style.display = 'none';);}">

<option selected="selected" value="0"></option>
<option value="1" onClick="document.getElementById('pole').focus();">1-я строка списка</option>

<div id="div" style="display:none;">
<input id="pole" type="text" style="width:30px; display:none;"/>
</div>

</form>

В результате при щелчке по 1-й строке списка слой становится видимым, но фокус не передаётся, пока не щёлкнешь по этой первой строке списка ещё раз. Если-же слой видим (style="display:inline;") сразу то фокус передаётся нормально.

Объясните пожалуйста, с чем это связано и как заставить правильно работать??

dmitriymar · #2 (**permalink**) 16.04.2011, 20:13

Сообщение от Демьян

<input id="pole" type="text" style="width:30px;"/>
когда контейнер делаешь видимым что мешает там же передать фокус инпуту?

Сообщение от Демьян

и как заставить правильно работать??

не нужно заставлять "правильно работать"-нужно сразу продумывать правильно алгоритм

Демьян · #3 (**permalink**) 16.04.2011, 21:32

Сообщение от dmitriymar

<input id="pole" type="text" style="width:30px;"/>
когда контейнер делаешь видимым что мешает там же передать фокус инпуту?

Сначала я так и сделал, но тогда фокус не перемещался вообще, а когда поставил

<option value="1" onClick="document.getElementById('pallet').focus();">

фокус стал перемещаться, но после второго клика. На option пробовал ставить одновременно и включение видимости слоя с перемещением фокуса, тогда фокус вообще не перемещался, поэтому пока оставил как писал выше, но это бессмысленно, никто не будет щёлкать по нему два раза

рони · #4 (**permalink**) 16.04.2011, 23:08

Демьян,
Рабочий вариант ...

<!DOCTYPE html>
<html>
 <head>
  <title></title>
</head>
<body>
<form id="form" name="form">
<select name="spisok" id="spisok" style="width: 155px;"
onchange="if (this.value == '1' ) { document.getElementById('div').style.display = 'inline';
document.getElementById('pole').focus();}
else {document.getElementById('div').style.display = 'none'}">
<option selected="selected" value="0"></option>
<option value="1">1-я строка списка</option>
</select>
<div id="div" style="display:none;">
<input id="pole" type="text" style="width:30px;"/>
</div>
</form>
</body>
</html>

Deff · #5 (**permalink**) 17.06.2012, 05:34

Многострочный Вариант

<div style="background-color:#fff">

<form id="form" name="form">
  <select name="spisok" id="spisok" style="width: 155px;" onchange="Onchange(this.value);return true;">
     <option selected="selected" value="0"></option>
     <option value="1">1-я строка списка</option>
     <option value="2">2-я строка списка</option>
     <option value="3">3-я строка списка</option>
  </select>

  <span id=span>
     <input id="pole1" type="text" value="1" style="width:30px;position:absolute;z-index:-100;"/>
     <input id="pole2" type="text" value="2" style="width:30px;position:absolute;z-index:-100;"/>
     <input id="pole3" type="text" value="3" style="width:30px;position:absolute;z-index:-100;"/>
  </span>

</form>

</div>

<script type="text/javascript">
function Onchange (c) {
  var a=document.getElementById('form')
  var elems=a.getElementsByTagName('input')
  for(var i=0; i<elems.length; i++) {
    elems[i].style.zIndex = '-100';
  }

     a=a.document.getElementById('pole'+c);
     a.style.zIndex = '12';
     a.focus();
}
</script>

Форум

Справочник

Discord чат

Курсы javascript