Question

当网页加载时，如何自动将焦点设置为文本框？

是否有HTML标签可以执行此操作，还是必须通过Javascript完成？

Answer 1

如果你正在使用jquery：

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

或原型：

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

或普通javascript：

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

但请记住，这将取代其他的加载处理程序，因此请在google中查找addLoadEvent（），以便安全地附加onload处理程序而不是替换。

Answer 2

在HTML中，所有表单字段都有autofocus attribute。在Dive Into HTML 5中有一个很好的教程。不幸的是，IE版本目前不是supported小于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。

Answer 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并引用一个函数，将焦点设置为您想要的文本框。

Answer 4

只需在文本字段中编写自动对焦即可。这很简单，它的工作原理如下：

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

希望这有帮助。

Answer 5

使用普通的hilla和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处理程序中（如果使用visual studio提供的库存页面模板，通常为page_load），您可以使用：

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，因为在代码块中它拒绝正确呈现！我在标记文档中看不到如何使下划线呈现未转义。）

希望这有帮助。

Answer 6

您可以通过这种方式使用jquery轻松完成：

<script type="text/javascript">

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

</script>

在$(document).ready()中调用此函数。

这意味着当DOM准备就绪时，该函数将执行。

有关READY功能的更多信息，请参阅：http://api.jquery.com/ready/

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

Answer 8

恕我直言，选择页面上第一个可见的启用文本字段的“最干净”方法是使用jQuery并执行以下操作：

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

希望有帮助...

...谢谢

Answer 9

作为一般建议，我建议不要从地址栏中窃取焦点。（Jeff already talked about that.）

网页可能需要一些时间来加载，这意味着您的焦点更改可能会在用户键入pae URL后很长时间内发生。然后他可以改变主意，回到网址输入，同时你将加载页面并窃取焦点将其放入文本框中。

这是让我删除Google作为我的起始页的唯一原因。

当然，如果您控制网络（本地网络）或焦点更改是为了解决重要的可用性问题，请忘记我刚刚说的所有内容：）

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

Answer 11

可以在输入元素上设置autofocus

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

Answer 12

如果您使用的是ASP.NET，则可以使用

yourControlName.Focus()

在服务器上的代码中，它将在页面中添加适当的JavaScript。

其他服务器端框架可能有等效的方法。

Answer 13

使用以下代码。对我而言，它正在发挥作用

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

当网页加载时，如何自动将焦点设置为文本框？

13 个答案: