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>