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

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

154 голосов
/ 05 сентября 2008

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

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

Ответы [ 12 ]

234 голосов
/ 05 сентября 2008

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

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

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

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

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

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

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

87 голосов
/ 15 июня 2010

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

14 голосов
/ 05 сентября 2008

Вам необходимо использовать JavaScript: 

<BODY onLoad="document.getElementById('myButton').focus();">

@ Бен отмечает, что вы не должны добавлять обработчики событий, подобные этому. Хотя это еще один вопрос, он рекомендует вам использовать эту функцию: 

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

А затем поместите вызов addLoadEvent на своей странице и, ссылаясь на функцию, установите фокус на нужное вам текстовое поле.

11 голосов
/ 16 января 2017

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

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

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

10 голосов
/ 01 сентября 2011

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

<script type="text/javascript">

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

</script>

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

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

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

10 голосов
/ 05 сентября 2008

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

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

6 голосов
/ 23 июля 2010

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

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

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

Спасибо ...

6 голосов
/ 05 сентября 2008 
<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 голосов
/ 06 сентября 2008

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

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

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

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

2 голосов
/ 02 декабря 2016

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...