這篇文章主要介紹了js顯示文本框提示文字的方法,涉及javascript鼠標事件及樣式操作的相關技巧,非常簡單實用,需要的朋友可以參考下
本文實例講述了js顯示文本框提示文字的方法。分享給大家供大家參考。具體實現方法如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>js提示文字</title>
- <style type="text/css">
- input{
- width:200px; height:24px;
- line-height:24px; border:1px solid #999;
- background:#ccc; margin:15px 0 0 100px;
- padding:4px; color:#666;
- }
- .current{
- background:#E0FEE4;
- border:1px solid #093;
- }
- </style>
- </head>
- <body>
- <input name="" type="text" value="請輸入姓名："/><br />
- <input name="" type="text" value="請輸入昵稱："/><br />
- <input name="" type="text" value="輸入驗證碼："/><br />
- <input name="" type="text" value="請輸入手機號碼："/><br />
- <input name="" type="text" value="請輸入電子郵件："/>
- <script type="text/javascript">
- var aInp=document.getElementsByTagName('input');
- var i=0;
- var sArray=[];
- for(i=0; i<aInp.length; i++)
- {
- aInp[i].index=i;
- sArray.push(aInp[i].value);
- aInp[i].onfocus=function()
- {
- if(sArray[this.index]==aInp[this.index].value)
- {
- aInp[this.index].value='';
- }
- aInp[this.index].className='current';
- };
- aInp[i].onblur=function()
- {
- if(aInp[this.index].value=='')
- {
- aInp[this.index].value=sArray[this.index];
- }
- aInp[this.index].className='';
- };
- }
- </script>
- </body>
- </html>
希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
