我們常會使用 element.focus() 方法，讓鍵盤游標停留在某個欄位上。例如說「會員登入」頁面開啟時，鍵盤輸入的游標就直接停在「帳號」欄位上，讓頁面開啟來後就可以直接輸入帳號。
但是當我畫面上的表單元素很多時，我會動態的將某些欄位隱藏，導致程式在執行 focus() 方法時會出現「控制項不可見、未啟動或無法接受焦點，因此無法將焦點移到控制項上。」的 JavaScript錯誤。
例如說下面的 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="tw">
<head>
<title>測試在 display:none 下的元素</title>
<script type="text/javascript">
window.onload = function ()
{
txtUsername = document.getElementById('username');
txtUsername.focus()
}
</script>
</head>
<body>
<form>
<div style="display:none;">
<input type="text" id="username" name="username" value="" />
</div>
</form>
</body>
</html>
在執行的時候，就會出現以下錯誤訊息：
之前這個問題困擾我很久，雖然我最後是用 try / catch 的方式解決的，但最近找到 2 個不錯的方法：
1. 當該元素目前是被隱藏的狀態時，該元素的 offsetWidth 屬性的值一定是 0，所以你就可以修改 JavaScript 避開錯誤了，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="tw">
<head>
<title>測試在 display:none 下的元素</title>
<script type="text/javascript">
window.onload = function ()
{
txtUsername = document.getElementById('username');
if(txtUsername.offsetWidth != 0)
{
txtUsername.focus();
}
}
</script>
</head>
<body>
<form>
<div style="display:none;">
<input type="text" id="username" name="username" value="" />
</div>
</form>
</body>
</html>
2. 另外也可以用「更嚴謹」的方法來檢查 HTML 中的元素是否被隱藏，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="tw">
<head>
<title>測試在 display:none 下的元素</title>
<script type="text/javascript">
function ElementIsVisible(elm)
{
if (typeof(elm.style) != "undefined" &&
(
( typeof(elm.style.display) != "undefined"
&& elm.style.display == "none" )
||
( typeof(elm.style.visibility) != "undefined"
&& elm.style.visibility == "hidden" )
)
)
{
return false;
}
else if (typeof(elm.parentNode) != "undefined"
&& elm.parentNode != null
&& elm.parentNode != elm)
{
return ElementIsVisible(elm.parentNode);
}
return true;
}
window.onload = function ()
{
txtUsername = document.getElementById('username');
if(ElementIsVisible(txtUsername))
{
txtUsername.focus();
}
}
</script>
</head>
<body>
<form>
<div style="display:none;">
<input type="text" id="username" name="username" value="" />
</div>
</form>
</body>
</html>
分享到：
相关推荐
jQuery实现HTML元素隐藏和显示 让我们来模仿一下淘宝网当你搜索某个商品的时候，那种显示全部品牌和显示部分品牌的功能。 首先我们来理清一下思路： 1、一开始需要先隐藏需要隐藏的元素 2、你需要通过jquery...
隐藏元素的方法.html
javascript 控制 html元素 显示/隐藏，下面是一些逐步的实现原理。
此元素将被隐藏，不显示，也不占用页面空间。 说明 语法格式 display：属性值; 元素的转换 示例 div { display: inline; } span{ display: block; } 总结 02 了解为什么需要对元素进行转换 在HTML界面设计中能熟练...
隐藏Html元素的方法最常用的方法有，css的display:none，一种方法两种实现方式，感兴趣的朋友可以了解下
在HTML页面中，除了系统支持的HTML元素外，是否可以建立自定义的HTML元素呢？答案是可以的。 自定义的HTML元素与系统自身的HTML元素地位相同，都可以用document.getElementById来获得，区别在于，自定义的HTML元素...
利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。 方法一： document.getElementById("EleId").style.visibility=...
需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现，感兴趣的朋友可以了解下本
本程序在网页中设计了Div层的显示和隐藏，代码简单、实用。
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下： 复制代码代码如下: <html> ...
IE 7 下， 先隐藏 父元素，后隐藏子元素，再显示父元素， 被隐藏的子元素 重叠区域下面， 存在另一个可见的元素， 则该 display:none的子元素出现BUG： 背景和图片(img元素，不仅仅是图片背景)仍然显示， 但文字不...
标签的的显示与隐藏，本例只使用了label标签，可自行更换需要的标签，只要是元素节点，添加id属性就可以.标签的的显示与隐藏，本例只使用了label标签，可自行更换需要的标签，只要是元素节点，添加id属性就可以.
html-fold提供隐藏和取消隐藏HTML / XML元素的支持。 html-fold是次要模式，因此您可以将其与某些HTML / XML编辑主要模式（例如）一起使用。 YaHTML，nxml-mode和psgml-mode。 安装html-fold.el 将html-fold.el放...
如下 1，两个div，d1中包含d2 2，d1，d2都设置了absolute或relative 3，隐藏d1 4，隐藏子元素d2 5，显示d1 这时IE6/7 and IE8/9/10(IE7模式)中会发现，子元素d2也能显示出了(别忘了，d2被display:none 了哦)。...
details元素规定了用户可见的或者隐藏的需求的补充细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。 语法格式 details元素和summary元素 示例：实现如下效果...
通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示： 实例 代码如下: $(“#hide”).click(function(){ $(“p”).hide(); }); $(“#show”).click(function(){ $(“p”).show(); }); hide() 和 ...
目录: 目录 第1篇 html基础入门篇 第1章 建立首要的、基础...19.2.2 验证语法是否有误 19.3 上传和更新的管理 19.3.1 使用ftp服务器建立上传网站空间 19.3.2 虚拟主机 19.3.3 管理和上传网站 19.3.4 管理局域网站点