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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

Использование простых ванильных 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 и asp.net 2.0 или выше, ее тривиально. Если вы используете более старые версии фреймворка, вам нужно написать несколько похожих JavaScript.

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

С#

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

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

Ответ 6

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

<script type="text/javascript">

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

</script>

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

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

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

Ответ 7

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

Ответ 8

IMHO, "самый чистый" способ выбрать первое, видимое, разрешенное текстовое поле на странице - использовать jQuery и сделать что-то вроде этого:

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

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

Спасибо...

Ответ 9

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

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

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

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

yourControlName.Focus()

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

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

Ответ 13

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

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