js中點擊空白區域時文本框與隱藏層的顯示與影藏問題

2024-05-06 15:51:10

字體：大中小

來源：轉載

供稿：網友

文本框獲得焦點的時在文本框的下方顯示一個浮動層，點擊文本框隱藏浮動層，下面為大家介紹下鼠標點擊時文本框與隱藏層處理問題，感興趣的朋友可以參考下

當文本框獲得焦點的時候，在文本框的下方顯示一個浮動層。

當用戶點擊除了文本框和浮動層以外的網頁空白處時，要隱藏浮動層。

當用戶點擊浮動層時，改變文本框的值。

復制代碼代碼如下:

<!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" value="">
<br>
<div
style="background:#666;position:absolute;overflow:auto;display:none;padding:50px;">點擊我</div>
</body>
</html>