Как автоматически установить фокус на текстовое поле при загрузке веб-страницы?

164

Есть ли для этого тег HTML или это нужно делать через Javascript?

javascript html Марк Бик
источник

blog.jerodsanto.net/2009/05/jquery-set-mouse-focus-on-page-load

Арджун

245

Если вы используете jquery:

$(function() {
  $("#Box1").focus();
});

или прототип:

Event.observe(window, 'load', function() {
  $("Box1").focus();
});

или простой JavaScript:

window.onload = function() {
  document.getElementById("Box1").focus();
};

хотя имейте в виду, что это заменит другие обработчики нагрузки, поэтому поищите addLoadEvent () в google для безопасного способа добавления обработчиков загрузки, а не замены.

Бен Шейрман
источник

3

Почему бы не поместить обработчики в элемент body? Любая ссылка? Спасибо

Александр Торстлинг

7

Потому что гораздо чище отделить JavaScript от HTML. Вы должны добавить поведение сценариев к визуальным элементам в вашем HTML.

Бен Шейрман

94

В 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 без поддержки.

dave1010
источник

3

Что с autofocus="aufofocus"? Все ссылки вы при условии , что просто сказать , чтобы добавить атрибут: autofocus.

Джеррат

6

Еще во времена XHTML и HTML4 это было обычным делом attribute="value"для логических атрибутов. HTML5 пришел вместе с «синтаксисом пустых атрибутов», и мы удалили избыточность. Теперь мы можем сделать<input checked disabled autofocus data-something>

dave1010

Мне нравится этот подход ... Этот код принадлежит к входу ... избавиться от ввода и бума, связанный код прямо здесь ... Мы так теряемся в эти дни ... Идя полным кругом, сейчас пытаемся упростить. ..

Серж

16

Вам нужно использовать 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 на своей странице и обратитесь к функции, которая устанавливает фокус на нужное вам текстовое поле.

Эспоо
источник

14

Просто напишите автофокус в текстовом поле. Это просто и работает так:

 <input name="abc" autofocus></input>

Надеюсь это поможет.

Арджун
источник

1

это хорошо , но проблема в том, если у вас есть шаги с раздвижным стилем, который не был бы полезен особенно , если тип входа находится на шаг 3 или 4 шага для экс

Брайант

12

Вы можете сделать это легко, используя jquery следующим образом:

<script type="text/javascript">

    $(document).ready(function () {
        $("#myTextBoxId").focus();
    });

</script>

вызывая эту функцию в $(document).ready().

Это означает, что эта функция будет выполняться, когда DOM будет готов.

Для получения дополнительной информации о функции ГОТОВ обратитесь к: http://api.jquery.com/ready/

Амир Чатрбар
источник

11

Используя простой ванильный 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, поскольку в блоке кода он отказывался правильно отображаться! Я не видел в документации по разметке, как получить подчеркивания для отображения без экранирования.)

Надеюсь это поможет.

Джон
источник

7

ИМХО, самый «чистый» способ выбрать первое, видимое, включенное текстовое поле на странице - это использовать jQuery и сделать что-то вроде этого:

$(document).ready(function() {
  $('input:text[value=""]:visible:enabled:first').focus();
});

Надеюсь, это поможет...

Спасибо...

возрождать
источник

6

<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>

Джоэл Коухорн
источник

5

Как общий совет, я бы рекомендовал не красть фокус с адресной строки. ( Джефф уже говорил об этом. )

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

Это единственная причина, которая заставила меня удалить Google в качестве стартовой страницы.

Конечно, если вы контролируете сеть (локальную сеть) или если смена фокуса направлена на решение важной проблемы юзабилити, забудьте все, что я только что сказал :)

Винсент Роберт
источник

Я согласен с вами в некоторых случаях. Тем не менее, в моем конкретном случае я выскакиваю небольшой div, который только один блок ввода. Предполагается, что пользователь вводит что-то и немедленно закрывает div, поэтому настройка фокуса удобна.

Марк Биек

2

У меня была немного другая проблема. Я хотел 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);

https://jsfiddle.net/b9chris/qLrrb93w/

Крис Москини
источник

0

Можно установить autofocusна элементы ввода

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">

Оскар Кастельон
источник

-1

Если вы используете ASP.NET, то вы можете использовать

yourControlName.Focus()

в коде на сервере, который добавит соответствующий JavaScript на страницу.

Другие серверные инфраструктуры могут иметь эквивалентный метод.

Эндрю Мортон
источник

-3

Используйте приведенный ниже код. Для меня это работает

jQuery("[id$='hfSpecialty_ids']").focus()

Srikanth
источник

Как автоматически установить фокус на текстовое поле при загрузке веб-страницы?

Ответы: