當(dāng)文本框獲得焦點(diǎn)的時(shí)候，在文本框的下方顯示一個(gè)浮動(dòng)層。

當(dāng)用戶點(diǎn)擊除了文本框和浮動(dòng)層以外的網(wǎng)頁空白處時(shí)，要隱藏浮動(dòng)層。

當(dāng)用戶點(diǎn)擊浮動(dòng)層時(shí)，改變文本框的值。

復(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;">點(diǎn)擊我</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

解決前端跨域問題方案匯總
這篇文章主要介紹了解決前端跨域問題8種方案的相關(guān)資料,需要的朋友可以參考下
2016-11-11
利用Echarts如何實(shí)現(xiàn)多段圓環(huán)圖
這篇文章主要給大家介紹了關(guān)于利用Echarts如何實(shí)現(xiàn)多段圓環(huán)圖的相關(guān)資料,文中通過實(shí)例代碼代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-03-03
js實(shí)現(xiàn)鍵盤上下左右鍵選擇文字并顯示在文本框的方法
這篇文章主要介紹了js實(shí)現(xiàn)鍵盤上下左右鍵選擇文字并顯示在文本框的方法,涉及javascript操作鍵盤事件及文本框的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下
2015-05-05
基于JavaScript實(shí)現(xiàn)游戲購物車效果詳解
這篇文章主要介紹了如何利用JavaScript實(shí)現(xiàn)游戲購物車效果，文中的實(shí)現(xiàn)代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定幫助，需要的可以參考一下
2022-03-03
JavaScript實(shí)現(xiàn)隨機(jī)產(chǎn)生字符串的方法分享
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)隨機(jī)產(chǎn)生字符串的方法，文中的示例代碼簡潔易懂，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下
2022-11-11
js比較兩個(gè)單獨(dú)的數(shù)組或?qū)ο笫欠裣嗟鹊膶?shí)例代碼
本文通過實(shí)例代碼給大家介紹了js比較兩個(gè)單獨(dú)的數(shù)組或?qū)ο笫欠裣嗟?,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
一次JavaScript正則的詭異經(jīng)歷記錄
正則表達(dá)式是用于匹配字符串中字符組合的模式,下面這篇文章主要給大家介紹了一次JavaScript正則的詭異經(jīng)歷記錄,文中通過實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
微信小程序如何獲取網(wǎng)絡(luò)狀態(tài)
這篇文章主要介紹了微信小程序如何獲取網(wǎng)絡(luò)狀態(tài),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
使用JavaScript進(jìn)行進(jìn)制轉(zhuǎn)換將字符串轉(zhuǎn)換為十進(jìn)制
JS 是一個(gè)很神奇的語言，可以將任意進(jìn)制字符串轉(zhuǎn)換為十進(jìn)制，如二進(jìn)制，八進(jìn)制，十六進(jìn)制, 第二數(shù)數(shù)不寫即為最常用的轉(zhuǎn)換為整型十進(jìn)制
2014-09-09
JavaScript面試之如何實(shí)現(xiàn)數(shù)組拍平（扁平化）方法
數(shù)組扁平化是指將一個(gè)多維數(shù)組變?yōu)橐痪S數(shù)組,下面這篇文章主要給大家介紹了關(guān)于JavaScript面試之如何實(shí)現(xiàn)數(shù)組拍平（扁平化）方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-11-11