Ответы:
Если вы используете jquery:
$(function() {
$("#Box1").focus();
});
или прототип:
Event.observe(window, 'load', function() {
$("Box1").focus();
});
или простой JavaScript:
window.onload = function() {
document.getElementById("Box1").focus();
};
хотя имейте в виду, что это заменит другие обработчики нагрузки, поэтому поищите addLoadEvent () в google для безопасного способа добавления обработчиков загрузки, а не замены.
В HTML есть autofocus
атрибут для всех полей формы. В Dive Into 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
.
attribute="value"
для логических атрибутов. HTML5 пришел вместе с «синтаксисом пустых атрибутов», и мы удалили избыточность. Теперь мы можем сделать<input checked disabled autofocus data-something>
Вам нужно использовать 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 на своей странице и обратитесь к функции, которая устанавливает фокус на нужное вам текстовое поле.
Просто напишите автофокус в текстовом поле. Это просто и работает так:
<input name="abc" autofocus></input>
Надеюсь это поможет.
Вы можете сделать это легко, используя jquery следующим образом:
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>
вызывая эту функцию в $(document).ready()
.
Это означает, что эта функция будет выполняться, когда DOM будет готов.
Для получения дополнительной информации о функции ГОТОВ обратитесь к: http://api.jquery.com/ready/
Используя простой ванильный 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, поскольку в блоке кода он отказывался правильно отображаться! Я не видел в документации по разметке, как получить подчеркивания для отображения без экранирования.)
Надеюсь это поможет.
ИМХО, самый «чистый» способ выбрать первое, видимое, включенное текстовое поле на странице - это использовать jQuery и сделать что-то вроде этого:
$(document).ready(function() {
$('input:text[value=""]:visible:enabled:first').focus();
});
Надеюсь, это поможет...
Спасибо...
<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>
Как общий совет, я бы рекомендовал не красть фокус с адресной строки. ( Джефф уже говорил об этом. )
Загрузка веб-страницы может занять некоторое время, а это означает, что смена фокуса может произойти через некоторое время после того, как пользователь введет URL-адрес pae. Тогда он мог бы передумать и вернуться к вводу URL, пока вы будете загружать свою страницу и красть фокус, чтобы поместить ее в текстовое поле.
Это единственная причина, которая заставила меня удалить Google в качестве стартовой страницы.
Конечно, если вы контролируете сеть (локальную сеть) или если смена фокуса направлена на решение важной проблемы юзабилити, забудьте все, что я только что сказал :)
У меня была немного другая проблема. Я хотел 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);
Можно установить autofocus
на элементы ввода
<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
Если вы используете ASP.NET, то вы можете использовать
yourControlName.Focus()
в коде на сервере, который добавит соответствующий JavaScript на страницу.
Другие серверные инфраструктуры могут иметь эквивалентный метод.