Вход

Просмотр полной версии : Нежелательный фокус на строку ввода


PashPP
28.07.2012, 19:00
Почему при нажатии на большинство элементов формы фокус становится на строке, это мешает и сбивает скролл страницы. В данном случае это происходит при клике на текст-подсказку.

<form name="analize">
<label for="youname">Ваше имя<label>
<input type="text" id="youname" />
<input type="checkbox" id="anonym" onclick="anon()"/>
<label for="anonym"> Аноним </label>
<div id="allparam">
<h3> Оцените свои параметры -50/+50</h3>
<div class="param">
<input id="health" size="2" maxlength="2" value="0" readonly></label> <input type="button" value="+5" onclick="counter1(5, 'health')" /> <input type="button" value="-5" onclick="counter1(-5, 'health')" />
<label for="health">Здоровье</label>
</div>
<div class="param">
<input id="beauty" size="2" maxlength="2" value="0" readonly></label> <input type="button" value="+5" onclick="counter1(5, 'beauty')" /> <input type="button" value="-5" onclick="counter1(-5, 'beauty')" />
<label for="beauty">Красота</label>
</div>
<div class="param">
<input id="streng" size="2" maxlength="2" value="0" readonly></label> <input type="button" value="+5" onclick="counter1(5, 'streng')" /> <input type="button" value="-5" onclick="counter1(-5, 'streng')" />
<label for="streng">Сила</label>
</div>
<div class="param">
<input id="education" size="2" maxlength="2" value="0" readonly></label> <input type="button" value="+5" onclick="counter1(5, 'education')" /> <input type="button" value="-5" onclick="counter1(-5, 'education')" />
<label for="education">Образованность</label>
</div>
<div class="param">
<input id="smart" size="2" maxlength="2" value="0" readonly></label> <input type="button" value="+5" onclick="counter1(5, 'smart')" /> <input type="button" value="-5" onclick="counter1(-5, 'smart')" />
<label for="smart">Интеллект</label>
</div>
<div class="param">
<input id="social" size="2" maxlength="2" value="0" readonly></label> <input type="button" value="+5" onclick="counter1(5, 'social')" /> <input type="button" value="-5" onclick="counter1(-5, 'social')" />
<label for="social">Социализированность</label>
</div>
<div class="param">
<input id="many" size="2" maxlength="2" value="0" readonly></label> <input type="button" value="+5" onclick="counter1(5, 'many')" /> <input type="button" value="-5" onclick="counter1(-5, 'many')" />
<label for="many">Финансы</label>
</div>
<div class="param">
<input id="luck" size="2" maxlength="2" value="0" readonly></label> <input type="button" value="+5" onclick="counter1(5, 'luck')" /> <input type="button" value="-5" onclick="counter1(-5, 'luck')" />
<label for="luck">Удачливость</label>
</div>
</form>

dmitriymar
28.07.2012, 19:02
Почему при нажатии на большинство элементов формы фокус становится на строке, это мешает и сбивает скролл страницы.

потому что это естественное поведение элементов

PashPP
28.07.2012, 19:04
Имелось ввиду на верхней строке ввода. Это дефолтное поведение? Но зачем? И как избежать?
Хм. Понял, что надо было в раздел хтмл запостить, но сюда по привычке. Извиняюсь.

dmitriymar
28.07.2012, 19:11
на верхней строке ввода.
это что такое ?
если вы удивляетесь почему при клике на <label> фокус становится на связанный input с ним-это правильное поведение описанное в спеках

lord2kim
28.07.2012, 19:17
PashPP,
2 строка - не закрыт label
после всех текстовых полей типа readOnly закрытие непонятного тега label

PashPP
28.07.2012, 19:20
На <input type="text" id="youname" /> он становится, когда жмешь на сторонние, привязанные к другим айди <label for="education">Образованность</label> или когда на другие кнопки. В разных браузерах по разному.

lord2kim
28.07.2012, 19:24
На <input type="text" id="youname" /> он становится, когда жмешь на сторонние, привязанные к другим айди <label for="education">Образованность</label> или когда на другие кнопки. В разных браузерах по разному.

т.к. у вас label на второй строке не закрыт...

PashPP
28.07.2012, 19:25
Точно, спасибо.