如何在不拥有所有HTML的情况下将焦点设置为HTML输入元素？

StackOverflow https://stackoverflow.com/questions/808908

  •  03-07-2019
  •  | 
  •  

题

首先，背景： 我在Tapestry 4中工作，因此任何给定页面的HTML都是通过分散在整个应用程序中的各种HTML来拼接在一起的。对于我正在处理的组件，我没有<body>标签，所以我不能给它一个onload属性。

组件有一个输入元素，在页面加载时需要对焦。有没有人知道在页面加载时将焦点设置为文件输入（或任何其他文本类型输入）而无需访问body标签的方法？

我尝试过将脚本插入到身体中 结果document.body.setAttribute('onload', 'setFocus()')
（其中setFocus是一个将焦点设置到文件输入元素的函数），但这不起作用。我不能说我对此感到惊讶。

修改的结果， 如上所述，我确实需要使用页面组件来完成此操作。我最终将文件类型输入添加到我们用于将焦点放在页面上的第一个可编辑和可见输入的脚本中。在研究这个问题时，我没有发现任何安全问题。

有帮助吗？

解决方案

这对我来说效果很好：

<script>
  function getLastFormElem(){
    var fID = document.forms.length -1;
    var f = document.forms[fID];
    var eID = f.elements.length -1;
    return f.elements[eID];
  }
</script>


<input name="whatever" id="maybesetmaybenot" type="text"/>
<!-- any other code except more form tags -->

<script>getLastFormElem().focus();</script>

其他提示

<script>
window.onload = function()  {
     document.getElementById('search_query').select();
    //document.getElementById('search_query').value = ''; 
    // where 'search_query' will be the id of the input element
};
</script>
我认为

必须有用!!!

你可以给窗口一个onload handler 

window.onload = setFocus;

我认为你的封装存在根本问题。虽然在大多数情况下您可以将事件处理程序附加到onload事件 - 请参阅 http：// ejohn John Resig的.org / projects / flexible-javascript-events / 如何执行此操作，setFocus需要由页面组件管理，因为您的页面上不能有两个组件要求它们获得焦点当页面加载时。

尝试使用

首先，输入文件与其他输入不同，您需要牢记这一点......出于安全原因。当输入文件获得焦点时，它应该是只读的，或者浏览器应该弹出一个对话框来选择一些文件。

现在，对于其他输入，您可以在某些元素上尝试一些onload事件...（不仅正文具有onload事件），或者您可以在html中间使用内联javascript。如果你把javascript代码放在一边，而不是告诉它是一个函数，它会在浏览器读取时执行。类似的东西：

<script type="text/javascript">

function yourFunction()
{
   ...;
};

alert('hello world!");

yourFunction();

</script>

该功能将在浏览器读取后立即执行。

如果可以，你应该使用jQuery来做你的javascript。它会让你的生活太容易了......：）

使用 jQuery 可以这样做：

$(function() {
    $("input:file").eq(0).focus()
})

使用普通的javascript可以这样做：

var oldWindowOnload = window.onload; // be nice with other uses of onload 
window.onload = function() {
    var form = document.forms[0];
    for(i=0; i < form.length; i++) {
        if (form[i].type == "file") {
            form[i].focus();
        }
    }
    oldWindowOnload();
}

有关使用普通javascript的更详细的解决方案，请参阅将焦点设置为网页上的第一个输入在CodeProject上。

Scunliffe的解决方案具有可用性优势。

当页面脚本加载缓慢时，从<！>“onLoad <！>”调用focus（）; event是一个非常讨厌的页面<！> quot; jump <！> quot;如果用户滚动页面。所以这是一种更加用户友好的方法：

<input id="..."></input>
... really small piece of HTML ...
<script>getTheDesiredInput().focus();</script>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top