金狮镖局 Design By www.egabc.com
当文本框获得焦点的时候,在文本框的下方显示一个浮动层。
当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层。
当用户点击浮动层时,改变文本框的值。
复制代码 代码如下:
<!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>
当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层。
当用户点击浮动层时,改变文本框的值。
复制代码 代码如下:
<!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>
标签:
空白区域,文本框,隐藏层
金狮镖局 Design By www.egabc.com
金狮镖局
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金狮镖局 Design By www.egabc.com
暂无js中点击空白区域时文本框与隐藏层的显示与影藏问题的评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]