首页 > 网络编程 > JavaScript > javascript技巧 > 元素获取焦点

JavaScript 关于元素获取焦点(隐藏元素与div)

2011-01-01 18:09:13 作者：

关于元素获取焦点要注意2个小问题，需要的朋友可以参考下。

1，隐藏元素无法获取焦点
2，对于div等特殊元素获取焦点

<!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"> 
<head> 
<title>关于元素获取焦点</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
body { margin: 32px; font-family: Verdana, sans-serif; font-size: 14px; } 
.title { font-size: 18px; font-weight: bolder;margin:40px 0; } 
</style> 
</head> 
<body> 
<div class="title">关于元素获取焦点：</div> 
<div class="title">1，隐藏元素无法获取焦点</div> 
<p>下面有个隐藏的Input:</p> 
<p style="display:none;"><input class="input" id="textbox" name="textbox" value="Hi,Jb51!!!" /></p> 
<input type="button" onclick="process0();" value="无法使隐藏元素获取焦点"> 
<p>解决方法：先把元素显示，在获取焦点。</p> 
<div class="title">2，对于div等特殊元素获取焦点</div> 
<div id="a" >我是DIV元素，我不带tabindex="-1"。</div> 
<input type="button" onclick="process1();" value="Div不能获取焦点"> 
<div id="b" tabindex="-1">我是DIV元素，我带tabindex="-1",点击下面按钮试试效果。</div> 
<input type="button" onclick="process2();" value="使Div获取焦点"> 
<script> 
function process0(){ 
var textbox = document.getElementById("textbox"); 
textbox.onfocus = function(){alert('获取焦点');} 
textbox.focus(); 
} 
function process1(){ 
var a = document.getElementById("a"); 
a.onfocus = function(){alert('获取焦点');} 
a.focus(); 
} 
function process2(){ 
var b = document.getElementById("b"); 
b.onfocus = function(){alert('获取焦点');} 
b.focus(); 
//非常推荐使用 tabindex = -1，基本无副作用！ 
} 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JavaScript 关于元素获取焦点(隐藏元素与div)

您可能感兴趣的文章: