Как вы автоматически устанавливаете фокус на текстовое поле при загрузке веб-страницы?
Как вы автоматически устанавливаете фокус на текстовое поле при загрузке веб-страницы?
Есть ли для этого HTML-тег или это нужно делать через Javascript?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 13
Вам нужно использовать javascript:
<BODY onLoad = "document.getElementById('myButton').focus();">
@Ben отмечает, что вам не следует добавлять такие обработчики событий. Хотя это еще один вопрос, он рекомендует использовать эту функцию:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
Затем вызовите addLoadEvent на своей странице и укажите функцию, которая устанавливает фокус на желаемое текстовое поле.
<html>
<head>
<script language = "javascript" type = "text/javascript">
function SetFocus(InputID)
{
document.getElementById(InputID).focus();
}
</script>
</head>
<body onload = "SetFocus('Box2')">
<input id = "Box1" size = "30" /><br/>
<input id = "Box2" size = "30" />
</body>
</html>
Если вы используете jquery:
$(function() {
$("#Box1").focus();
});
или прототип:
Event.observe(window, 'load', function() {
$("Box1").focus();
});
или простой javascript:
window.onload = function() {
document.getElementById("Box1").focus();
};
хотя имейте в виду, что это заменит другие обработчики нагрузки, поэтому поищите в Google addLoadEvent () безопасный способ добавления обработчиков загрузки, а не замены.
Почему бы не поставить обработчики на элемент body? Любая ссылка? Спасибо
Потому что гораздо проще отделить javascript от HTML. Вы должны добавить поведение сценария к визуальным элементам в вашем HTML.
Использование простого ванильного html и javascript
<input type='text' id='txtMyInputBox' />
<script language='javascript' type='text/javascript'>
function SetFocus()
{
// safety check, make sure its a post 1999 browser
if (!document.getElementById)
{
return;
}
var txtMyInputBoxElement = document.getElementById("txtMyInputBox");
if (txtMyInputBoxElement != null)
{
txtMyInputBoxElement.focus();
}
}
SetFocus();
</script>
Для тех, кто использует .net framework и asp.net 2.0 или выше, это тривиально. Если вы используете более старые версии фреймворка, вам нужно написать какой-нибудь javascript, аналогичный приведенному выше.
В обработчике OnLoad (обычно page_load, если вы используете шаблон стандартной страницы, поставляемый с Visual Studio) вы можете использовать:
C#
protected void PageLoad(object sender, EventArgs e)
{
Page.SetFocus(txtMyInputBox);
}
VB.NET
Protected Sub PageLoad(sender as Object, e as EventArgs)
Page.SetFocus(txtMyInputBox)
End Sub
(* Обратите внимание, что я удалил символ подчеркивания из имени функции, которое обычно является Page_Load, поскольку в блоке кода он отказывался правильно отображаться! Я не видел в документации по разметке, как получить подчеркивание для рендеринга без экранирования.)
Надеюсь это поможет.
В качестве общего совета я бы рекомендовал не красть фокус из адресной строки. (Джефф уже говорил об этом.)
Загрузка веб-страницы может занять некоторое время, а это означает, что изменение фокуса может произойти через некоторое время после того, как пользователь набрал URL-адрес pae. Тогда он мог бы передумать и вернуться к вводу URL-адреса, пока вы загружаете свою страницу и крадете фокус, чтобы поместить ее в свое текстовое поле.
Это единственная причина, по которой я удалил Google в качестве стартовой страницы.
Конечно, если вы управляете сетью (локальной сетью) или если основное внимание уделяется решению важной проблемы удобства использования, забудьте все, что я только что сказал :)
Я согласен с вами в некоторых случаях. Однако в моем конкретном случае я открываю небольшой div, в котором только одно поле ввода. Предполагается, что пользователь что-то вводит и сразу закрывает div, поэтому установка фокуса удобна.
В HTML есть Атрибут autofocus для всех полей формы. По этому поводу есть хороший учебник в Погрузитесь в HTML 5. К сожалению, в настоящее время это не поддержанный для версий IE ниже 10.
Чтобы использовать атрибут HTML 5 и вернуться к варианту JS:
<input id = "my-input" autofocus = "autofocus" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>
Обработчики jQuery, onload или событий не требуются, поскольку JS находится ниже элемента HTML.
Обновлено: еще одним преимуществом является то, что он работает с отключенным JavaScript в некоторых браузерах, и вы можете удалить JavaScript, если не хотите поддерживать старые браузеры.
Изменить 2: Firefox 4 теперь поддерживает атрибут autofocus, просто оставив IE без поддержки.
Что с autofocus = "aufofocus"? Все ссылки, которые вы предоставили, просто говорят о добавлении атрибута: autofocus.
Во времена XHTML и HTML4 было обычным делом использовать attribute = "value" для логических атрибутов. HTML5 пришел с «синтаксисом пустых атрибутов», и мы отказались от избыточности. Теперь мы можем сделать <input checked disabled autofocus data-something>
Мне нравится этот подход ... Этот код принадлежит входу ... Избавьтесь от входа и стрелы, связанный код прямо здесь ... Мы так заблудились в эти дни ... Сейчас мы делаем полный круг, пытаясь упростить. ..
IMHO, самый чистый способ выбрать первое, видимое, активированное текстовое поле на странице - использовать jQuery и сделать что-то вроде этого:
$(document).ready(function() {
$('input:text[value = ""]:visible:enabled:first').focus();
});
Надеюсь, это поможет...
Спасибо...
Вы можете легко сделать это, используя jquery следующим образом:
<script type = "text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>
вызывая эту функцию в $(document).ready().
Это означает, что эта функция будет выполняться, когда DOM будет готов.
Для получения дополнительной информации о функции READY см .: http://api.jquery.com/ready/
Используйте приведенный ниже код. Для меня это работает
jQuery("[id$='hfSpecialty_ids']").focus()
У меня была немного другая проблема. Я хотел autofocus, но хотел, чтобы текст placeholder оставался кроссбраузерным. Некоторые браузеры скрывали текст placeholder, как только поле фокусировалось, некоторые сохраняли его. Мне пришлось либо сделать так, чтобы заполнители оставались кроссбраузерными, что имеет странные побочные эффекты, либо прекратить использование autofocus.
Итак, я прослушал первую клавишу, введенную против тега body, и перенаправил ее в целевое поле ввода. Затем все задействованные обработчики событий убираются, чтобы все было в чистоте.
var urlInput = $('#Url');
function bodyFirstKey(ev) {
$('body').off('keydown', bodyFirstKey);
urlInput.off('focus', urlInputFirstFocus);
if (ev.target == document.body) {
urlInput.focus();
if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
urlInput.val(ev.key);
return false;
}
}
};
function urlInputFirstFocus() {
$('body').off('keydown', bodyFirstKey);
urlInput.off('focus', urlInputFirstFocus);
};
$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);
Если вы используете ASP.NET, вы можете использовать
yourControlName.Focus()
в коде на сервере, который добавит на страницу соответствующий JavaScript.
У других серверных фреймворков может быть эквивалентный метод.
Просто напишите автофокус в текстовом поле. Это просто, и работает это так:
<input name = "abc" autofocus></input>
Надеюсь это поможет.
это хорошо, но проблема в том, что если у вас есть шаги со скользящим стилем, это не будет полезно, особенно если тип ввода находится на шаге 3 или шаге 4, например
Можно установить autofocus на входных элементах.
<input type = "text" class = "b_calle" id = "b_calle" placeholder = "Buscar por nombre de calle" autofocus = "autofocus">