2008-10-06 167 views
12

我有一个使用来自ASP.NET UpdatePanel的AJAX调用显示的lightbox文本框。在显示灯箱时,我使用灯箱中的文本框的focus()方法将焦点集中到文本框上。检查DOM元素是否有焦点

在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()事件在这里没有帮助。

+0

如果setTimeout()的延迟为0,该方法是否工作? – Aintaer 2012-08-08 20:44:42

+0

难道是在呈现lightbox +文本框之前执行脚本?你如何打开灯箱?也许发布一些代码。 – 2008-10-06 15:31:40

+0

这当然是可能的,我只是不知道该怎么做才能解决这个问题。 – 2008-10-06 16:16:28

回答

1

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

我为此已使用FastInitJQuery $(document).ready()也可以。

1

你可以尝试这样[IE Specific]。 (未经测试)

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

另一种方法可能是改变与聚焦状态元素的背景颜色,然后用JS检查找回它,如果它是它应该是什么,如果不是:重新调整的元素。

+0

我试过了。 readyState已经“完整”了,这真是让我感到困惑。 IE说DOM元素已经准备好了,但是直到它“真的准备好”之后,你才能做出具体的事情。我猜是描述它的最好方式。 – 2008-10-06 17:47:40

1

你可以试试这个:

  1. 使用endRequest事件PageRequestManager的。该事件在Ajax更新完成后触发。
  2. 注重文本框的事件处理程序

下面是一些示例代码:

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

在IE中有几件事情,那就是诀窍:

  1. 如果聚焦元件具有不同的z-index - 您可以快速设置的z-index到当前焦点元素(可以设置“隐藏”属性),设置聚焦,然后将其设置回原来的Z-指数。

  2. 尝试模糊()当前焦点元素。

  3. 如果元素是'shimmed' - 将'shim'元素集中。

1

看来,只有在脚本运行完成之后,IE才会更新DOM。因此,焦点的循环测试将不允许更新DOM。使用setTimeout可能是唯一的工作解决方案。

你的.focus()的例子是一个众所周知的例子, this answer

1

您是否尝试过将autofocus="autofocus"属性添加到您通过Ajax调用的文本框元素?

通常,当我需要某些额外的JavaScript功能在动态内容上运行时,我会简单地将JavaScript添加到所调用的内容中。

JavaScript在添加到DOM后也会执行。我没有看到将JavaScript写入父文件,然后“监听”DOM更改的观点。就像你提到的那样,setTimeout()比其他任何东西都更像是这样:)