我們常會使用 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() 和 ...
html2canvas 能够实现在浏览器端、app端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。