js中點擊空白區(qū)域時文本框與隱藏層的顯示與影藏問題
更新時間：2013年08月26日 18:25:16 作者：
文本框獲得焦點的時在文本框的下方顯示一個浮動層，點擊文本框隱藏浮動層，下面為大家介紹下鼠標點擊時文本框與隱藏層處理問題，感興趣的朋友可以參考下
當文本框獲得焦點的時候，在文本框的下方顯示一個浮動層。
當用戶點擊除了文本框和浮動層以外的網(wǎng)頁空白處時，要隱藏浮動層。
當用戶點擊浮動層時，改變文本框的值。
<!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>
當用戶點擊除了文本框和浮動層以外的網(wǎng)頁空白處時，要隱藏浮動層。
當用戶點擊浮動層時，改變文本框的值。
復制代碼 代碼如下:
<!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>
您可能感興趣的文章:
- JS使用遮罩實現(xiàn)點擊某區(qū)域以外時彈窗的彈出與關閉功能示例
- js點擊任意區(qū)域彈出層消失實現(xiàn)代碼
- JavaScript實現(xiàn)點擊按鈕復制指定區(qū)域文本(推薦)
- JS實現(xiàn)點擊顏色塊切換指定區(qū)域背景顏色的方法
- js實現(xiàn)的點擊div區(qū)域外隱藏div區(qū)域
- js+html5實現(xiàn)canvas繪制橢圓形圖案的方法
- js+html5實現(xiàn)canvas繪制圓形圖案的方法
- JavaScript Canvas繪制圓形時鐘效果
- js Canvas實現(xiàn)圓形時鐘教程
- JavaScript實現(xiàn)的圓形浮動標簽云效果實例
- JS+HTML實現(xiàn)的圓形可點擊區(qū)域示例【3種方法】
相關文章
在網(wǎng)頁使用過程中，經(jīng)常會用到代碼的展示。代碼高亮可以直觀的了解代碼，本文主要介紹了highlight.js 代碼高亮插件的使用詳解，具有一定的參考價值，感興趣的可以了解一下2022-01-01
D3.js實現(xiàn)簡潔實用的動態(tài)儀表盤的示例
本篇文章主要介紹了D3.js實現(xiàn)簡潔實用的動態(tài)儀表盤的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
不錯的asp中顯示新聞的功能...2006-10-10
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)收縮式菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript Generator函數(shù)使用分析
生成器Generator是JavaScript ES6引入的特性，它讓我們可以分段執(zhí)行一個函數(shù)。但是在談論生成器（Generator）之前，我們要先了解迭代器Iterator2022-10-10
ajax提交并返回xml的實現(xiàn)代碼2008-11-11
js+HTML5實現(xiàn)canvas多種顏色漸變效果的方法
這篇文章主要介紹了js+HTML5實現(xiàn)canvas多種顏色漸變效果的方法,涉及html5屬性的相關技巧,需要的朋友可以參考下2015-06-06
TypeScript里string和String的區(qū)別
這篇文章主要介紹了TypeScript里string和String的區(qū)別，真的不止是大小寫的區(qū)別，string表示原生類型，而String表示對象，下文更多詳細內(nèi)容需要的小伙伴可以參考一下2022-03-03
js 實現(xiàn)無干擾陰影效果 簡單好用（附文件下載）
js實現(xiàn)無干擾陰影效果,簡單好用，需要的朋友可以參考下。2009-12-12
這篇文章主要介紹了uniapp使用vue-cli新建項目并打包,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11