首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js中点击空白区域时文本框与隐藏层的有关问题

2013-09-05 
js中点击空白区域时文本框与隐藏层的问题当文本框获得焦点的时候,在文本框的下方显示一个浮动层。当用户点

js中点击空白区域时文本框与隐藏层的问题

当文本框获得焦点的时候,在文本框的下方显示一个浮动层。

当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层。

当用户点击浮动层时,改变文本框的值。


<!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>


热点排行