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


答案：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,zhaoxi!!!" /></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同意等待代码实现心得
下一个：Javascript事件热键兼容ie|firefox
更多图片编程知识: