:
如何?圖中效果:
1.在文字框中給出提示
2.當點擊輸入時,提示消失
3.當點擊文字框,但未輸入資料,失去焦點時仍給出提示.
實現過程如下:
1.一個span和一個文字框
2.設定span的常值內容為提示內容
3.設定文字框的的樣式和事件.
主要就是設定文字框的位置,設定絕對位置,定位在span的上面,然後設定文字框的背景顏色為transparent即可.
具體代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>無標題頁</title> <style type="text/css"> #txt { position:absolute; top:10px; left:10px; background-color:Transparent; z-index:100; } #txt2 { position:absolute; top:35px; left:10px; background-color:Transparent; } .span1 { color:Silver; left:10px; } .span2 { color:White; left:10px; } </style> </head><body style="margin:10px"> <span class="span1" id='sp'> 姓名: </span> <input type="text" id='txt' /> <br /> <span class="span1" id='sp2'> 密碼: </span> <input type="text" id='txt2' /> <script type="text/javascript"> document.getElementById("txt").onclick=function(){ document.getElementById("sp").className="span2"; }; document.getElementById("txt2").onclick=function(){ document.getElementById("sp2").className="span2"; }; document.getElementById("txt").onblur=function(){ if(window.event.srcElement.value==''){ document.getElementById("sp").className="span1"; } }; document.getElementById("txt2").onblur=function(){ if(window.event.srcElement.value==''){ document.getElementById("sp2").className="span1"; } }; </script></body></html>