js中点击空白区域时文本框与隐藏层的显示与影藏问题

180 阅读 0 评论 119 点赞

我是靠谱客的博主文艺自行车，最近开发中收集的这篇文章主要介绍js中点击空白区域时文本框与隐藏层的显示与影藏问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

当文本框获得焦点的时候，在文本框的下方显示一个浮动层。

当用户点击除了文本框和浮动层以外的网页空白处时，要隐藏浮动层。

当用户点击浮动层时，改变文本框的值。

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head> 
<script language="JavaScript"> 
function $(id){ 
return (document.getElementById(id)); 
} 

function show_div(evt) { 
var od = $('div1'); 
var e = window.event || evt; 
var o = e.srcElement || e.target; 
with (od.style) { 
display = 'block'; 
left = o.offsetLeft + 'px'; 
top = o.offsetTop + o.offsetHeight + 1 + 'px'; 
} 
} 

function hide_div(evt) { 
$('div1').style.display = 'none'; 
} 

function control_bubble(oEvent) { 
//取消冒泡 
oEvent = oEvent || window.event; 
if (document.all) { 
oEvent.cancelBubble = true; 
} else { 
oEvent.stopPropagation(); 
} 
}; 

function fill_input(oEvent) { 
$('text1').value = $('div1').innerHTML; 
control_bubble(oEvent); 
} 

window.onload = function() { 
$("text1").onfocus = show_div; 

document.onclick = function() { 
//隐藏层 
hide_div(); 
}; 

$("text1").onclick = control_bubble; 
$("div1").onclick = fill_input; 
} 
</script> 
<body> 
<br> 
<input type="text" id="text1" value=""> 
<br> 
<div id="div1" align="center" 
style="background:#666;position:absolute;overflow:auto;display:none;padding:50px;">点击我</div> 
</body> 
</html> 