js中點擊空白區(qū)域時文本框與隱藏層的顯示與影藏問題
更新時間：2013年08月26日 18:25:16 作者：
文本框獲得焦點的時在文本框的下方顯示一個浮動層，點擊文本框隱藏浮動層，下面為大家介紹下鼠標(biāo)點擊時文本框與隱藏層處理問題，感興趣的朋友可以參考下
當(dāng)文本框獲得焦點的時候，在文本框的下方顯示一個浮動層。
當(dāng)用戶點擊除了文本框和浮動層以外的網(wǎng)頁空白處時，要隱藏浮動層。
當(dā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>
當(dāng)用戶點擊除了文本框和浮動層以外的網(wǎng)頁空白處時，要隱藏浮動層。
當(dāng)用戶點擊浮動層時，改變文本框的值。
復(fù)制代碼 代碼如下:
<!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ū)域以外時彈窗的彈出與關(guān)閉功能示例
- js點擊任意區(qū)域彈出層消失實現(xiàn)代碼
- JavaScript實現(xiàn)點擊按鈕復(fù)制指定區(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)的圓形浮動標(biāo)簽云效果實例
- JS+HTML實現(xiàn)的圓形可點擊區(qū)域示例【3種方法】
相關(guān)文章
這篇文章主要介紹了解決前端跨域問題8種方案的相關(guān)資料,需要的朋友可以參考下2016-11-11
利用Echarts如何實現(xiàn)多段圓環(huán)圖
這篇文章主要給大家介紹了關(guān)于利用Echarts如何實現(xiàn)多段圓環(huán)圖的相關(guān)資料,文中通過實例代碼代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
js實現(xiàn)鍵盤上下左右鍵選擇文字并顯示在文本框的方法
這篇文章主要介紹了js實現(xiàn)鍵盤上下左右鍵選擇文字并顯示在文本框的方法,涉及javascript操作鍵盤事件及文本框的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了如何利用JavaScript實現(xiàn)游戲購物車效果，文中的實現(xiàn)代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定幫助，需要的可以參考一下2022-03-03
JavaScript實現(xiàn)隨機產(chǎn)生字符串的方法分享
這篇文章主要為大家詳細(xì)介紹了JavaScript中實現(xiàn)隨機產(chǎn)生字符串的方法，文中的示例代碼簡潔易懂，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2022-11-11
js比較兩個單獨的數(shù)組或?qū)ο笫欠裣嗟鹊膶嵗a
本文通過實例代碼給大家介紹了js比較兩個單獨的數(shù)組或?qū)ο笫欠裣嗟?,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
正則表達(dá)式是用于匹配字符串中字符組合的模式,下面這篇文章主要給大家介紹了一次JavaScript正則的詭異經(jīng)歷記錄,文中通過實例介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài)
這篇文章主要介紹了微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
使用JavaScript進(jìn)行進(jìn)制轉(zhuǎn)換將字符串轉(zhuǎn)換為十進(jìn)制
JS 是一個很神奇的語言，可以將任意進(jìn)制字符串轉(zhuǎn)換為十進(jìn)制，如二進(jìn)制，八進(jìn)制，十六進(jìn)制, 第二數(shù)數(shù)不寫即為最常用的轉(zhuǎn)換為整型十進(jìn)制2014-09-09
JavaScript面試之如何實現(xiàn)數(shù)組拍平（扁平化）方法
數(shù)組扁平化是指將一個多維數(shù)組變?yōu)橐痪S數(shù)組,下面這篇文章主要給大家介紹了關(guān)于JavaScript面試之如何實現(xiàn)數(shù)組拍平（扁平化）方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11