Fatal编程技术网
  • javascript/
  • Javascript 如何在加载网页时自动将焦点设置为文本框？

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

javascript html

Javascript 如何在加载网页时自动将焦点设置为文本框？,javascript,html,Javascript,Html,如何在加载网页时自动将焦点设置为文本框 是否有HTML标记来执行此操作，还是必须通过Javascript执行此操作？您需要使用Javascript： <BODY onLoad="document.getElementById('myButton').focus();"> window.onload = function() { document.getElementById("Box1").focus(); }; 然后在页面上调用addLoadEvent并引用一个函数，将焦点

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

是否有HTML标记来执行此操作，还是必须通过Javascript执行此操作？

您需要使用Javascript：

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

window.onload = function() {
  document.getElementById("Box1").focus();
};
然后在页面上调用addLoadEvent并引用一个函数，将焦点设置为所需的文本框。



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


函数SetFocus（InputID）
{  
document.getElementById（InputID.focus（）；
}
如果您使用的是jquery：

$(function() {
  $("#Box1").focus();
});
或原型：

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

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

window.onload = function() {
  document.getElementById("Box1").focus();
};
尽管请记住，这将替换其他加载处理程序，但请在google中查找addLoadEvent（）以找到一种安全的方法来附加加载处理程序，而不是替换。

使用普通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>
VB.NET

Protected Sub PageLoad(sender as Object, e as EventArgs)

    Page.SetFocus(txtMyInputBox)

End Sub
（*注意，我从函数名中删除了下划线字符，因为在代码块中，它拒绝正确呈现！我在标记文档中看不到如何获取下划线以呈现未缩放。）

希望这有帮助。

作为一般建议，我建议不要从地址栏中窃取焦点。（）

加载网页可能需要一些时间，这意味着在用户键入pae URL后很长一段时间内，焦点可能会发生变化。然后他可能会改变主意，在你加载页面、窃取焦点并将其放入文本框时，重新输入url

这是唯一的原因，使我删除谷歌作为我的起始页

当然，如果你控制网络（本地网络），或者如果重点的改变是为了解决一个重要的可用性问题，那么忘记我刚才说的：）

在HTML中，所有表单字段都有一个。在中有一个很好的教程。不幸的是，它目前不是由IE版本低于10

要使用HTML 5属性并返回到JS选项，请执行以下操作：

<input id="my-input" autofocus="autofocus" />
<script>
  if (!("autofocus" in document.createElement("input"))) {
    document.getElementById("my-input").focus();
  }
</script>


if（！（.createElement（“输入”）中的“自动聚焦”）{
document.getElementById（“我的输入”）.focus（）；
}
不需要jQuery、onload或事件处理程序，因为JS位于HTML元素下面

编辑：另一个优点是它可以在某些浏览器中关闭JavaScript，当您不想支持旧浏览器时，可以删除JavaScript

编辑2:Firefox4现在支持
autofocus
属性，只是让IE不受支持。

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

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

 <input name="abc" autofocus></input>
希望这有助于

谢谢…

通过以下方式使用jquery，您可以轻松完成此任务：

<script type="text/javascript">

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

</script>


$（文档）.ready（函数（）{
$（“#myTextBoxId”）.focus（）；
});
通过在
$（document.ready（）
中调用此函数

这意味着这个函数将在DOM就绪时执行

有关就绪功能的更多信息，请参阅：

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

jQuery("[id$='hfSpecialty_ids']").focus()
我有一个稍微不同的问题。我希望
自动对焦
，但希望
占位符
文本保持跨浏览器。一些浏览器会在字段聚焦后立即隐藏
占位符
文本，一些浏览器会保留它。我要么让占位符留在浏览器中，这会产生奇怪的副作用，要么停止使用
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);
如果您使用的是ASP.NET，则可以使用

yourControlName.Focus()
在服务器上的代码中，这将向页面中添加适当的JavaScript

其他服务器端框架可能有类似的方法。

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

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

 <input name="abc" autofocus></input>
希望这有帮助。

可以在输入元素上设置
自动对焦

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
在某些情况下，我同意你的看法。然而，在我的特殊情况下，我弹出了一个小div，它只有一个输入框。用户应该输入一些内容，然后立即关闭div，这样设置焦点就很方便了。为什么不在body元素上放置处理程序呢？有参考资料吗？谢谢，因为将javascript和HTML分开要干净得多。您应该向HTML中的可视元素添加脚本行为。autofocus=“aufoFoFocus”有什么用？您提供的所有链接都只是为了添加属性：
autofocus
。早在XHTML和HTML4时代，对布尔属性执行
attribute=“value”
是很常见的。HTML5与“空属性语法”一起出现，我们放弃了冗余。现在我们可以做
我喜欢这种方法。。。该代码属于输入。。。摆脱输入和boom，相关代码就在那里。。。这些天我们迷路了。。。现在试着简化整个循环…这是好的，但问题是，如果你有滑动样式的步骤，那将不会有用，尤其是如果输入类型在步骤3或步骤4中，例如