JavaScript实现点击空白处隐藏浮动层与文本框交互

浮动层与文本框交互逻辑

当文本框获取焦点时，在其正下方显示一个浮动层。

当用户点击除文本框和浮动层之外的页面空白区域时，需要隐藏该浮动层。

当用户点击浮动层内部时，将浮动层的内容赋值给文本框。

 
<!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>