Question

我有一个使用ASP.NET UpdatePanel的AJAX调用显示的灯箱文本框。当灯箱显示时，我使用灯箱中文本框的focus()方法立即将焦点带到文本框。

在Firefox中，文本框获得焦点没有问题。在IE中，除非我使用

，否则文本框不会获得焦点

setTimeout(function(){txtBx.focus()}, 500);

使得焦点方法在稍后加载之后，我已经加载了DOM元素。

问题是，在该行的正上方，我已经在检查该元素是否为null / undefined，因此如果该对象遇到该行，则该对象已经存在，它只是不允许自己获得焦点出于某种原因。

显然设置一个计时器来“修复”这个问题并不是解决这个问题的最好或最优雅的方法。我希望能够做到以下几点：

var txtBx = document.getElementById('txtBx');

if (txtPassword != null) {
    txtPassword.focus();
    while (txtPassword.focus === false) {
        txtPassword.focus();
    }
}

有没有办法告诉文本框有焦点所以我可以做上面的事情？

或者我是以错误的方式看待这个？

修改
为了澄清，我没有在页面加载时调用代码。脚本是位于页面顶部，但它位于ASP.NET的异步回发完成时调用的函数内部，而不是在页面加载时调用。

因为这是在Ajax更新之后显示的，所以应该已经加载了DOM，所以我假设jQuery的$(document).ready()事件在这里没有帮助。

Answer 1

尝试将焦点设置在页面末尾的javascript而不是开头，或者在页面加载事件后触发它。这将有助于确保在设置焦点之前完全加载DOM。

我已经使用FastInit了。 JQuery $（document）.ready（）也可以。

Answer 2

你可以试试这样的东西[IE Specific]。（另）

theAjaxCreatedElement.onreadystatechange = function() {
    if ( this.readyState != "complete" ) 
        return;
    this.focus();
};

另一种方法可能是使用onfocus更改元素的背景颜色，然后使用js检查它是否应该是它应该是什么，如果不是：重新聚焦元素。

Answer 3

你可以试试这个：

使用endRequest的PageRequestManager事件。一旦Ajax更新完成，该事件就会触发。
将文本框聚焦在事件处理程序

以下是一些示例代码：

<script type="text/javascript">
    function onRequestEnd()
    {
     var txtBx = $get('txtBx');
     txtBx.focus();
    }  
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onRequestEnd);
</script>

要最初聚焦文本框，您可以使用pageLoad函数（load客户端对象的Application事件的快捷方式）：

<script type="text/javascript">
function pageLoad()
{
    var txtBx = $get('txtBx');
    txtBx.focus();
}
</script>

Answer 4

IE中有几件事可以解决问题：

如果聚焦元素具有不同的z-index - 您可以快速将z-index设置为当前聚焦元素（可能设置hidden属性），设置焦点，然后设置它回到原始z-index。
尝试blur()当前关注的元素。
如果元素是'shimmed' - 请关注'shim'元素。

Answer 5

似乎IE在脚本运行完毕之后才更新DOM。因此，焦点的循环测试将不允许DOM更新。使用setTimeout可能是唯一可行的解决方案。

.focus()的示例是众所周知的示例，请参阅例如this answer

Answer 6

您是否尝试将class="org.springframework.context.support.ReloadableResourceBundleMessageSource "> <property name="basename" value="resources/locale/messages"/> <property name="cacheSeconds" value="3600"/> </bean>属性添加到您通过Ajax调用的文本框元素中？

通常，当我需要在动态内容上运行某些额外的JavaScript功能时，我只需将JavaScript添加到被调用的内容中。

JavaScript也会在添加到DOM后执行。我没有看到将JavaScript编写到父文件然后“监听”DOM的更改。就像你提到的那样，对于像这样的东西，setTimeout（）更像是一个hack而不是其他任何东西:)

检查DOM元素是否具有焦点

6 个答案: