当前位置：Gxlcms > JavaScript > JavaScript 关于元素获取焦点(隐藏元素与div)

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

时间：2021-07-01 10:21:17 帮助过：22人阅读

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> 
关于元素获取焦点： 
1，隐藏元素无法获取焦点 
<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> 
2，对于div等特殊元素获取焦点 
我是DIV元素，我不带tabindex="-1"。 
<input type="button" onclick="process1();" value="Div不能获取焦点"> 
我是DIV元素，我带tabindex="-1",点击下面按钮试试效果。 
<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)

人气教程排行