萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 控制input輸入框中提示信息的顯示和隱藏的方法

控制input輸入框中提示信息的顯示和隱藏的方法

 這篇文章主要介紹了怎樣控制input輸入框中提示信息的顯示和隱藏 ,需要的朋友可以參考下

在運用html+css+javascrpt進行頁面制作時,我們往往會遇到一些影響用戶體驗,而又容易被我們忽視的小細節。比如,input輸入框中的提示信息,怎樣才能根據對象獲得和失去焦點而實現其顯示和隱藏。今天在這裡,想跟大家分享一下這個小技巧,希望各位大神不要拍磚哦~~~    一、要求    input輸入框,在光標顯示時,隱藏提示信息;光標離開輸入框時,顯示提示信息。    二、方法    1、給該input取id名,Onfocus=”方法名1(this)”,onblur=”方法名2(this)”    2、聲明變量value,通過id名獲得該input    3、function 方法名1(inputObj){   代碼如下: if(inputObj.value==”……”){    inputObj.value=””;    }    }    4、function 方法名2(inputObj){  代碼如下: if(inputObj.value==””){    inputObj.value=”……”;    }    }    5、注意:如果同一個頁面中有多個input標簽需要同樣的設置,則方法名不能一致。    三、實例  代碼如下: <!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>無標題文檔</title>  <link href="file:///E|/做過的網站/midi/css/index.css" type="text/css" rel="stylesheet" />  <script type="text/javascript">  var value=document.getElementById('shuru');  function qingkong(inputObj){  if(inputObj.value=="請輸入您的姓名"){  inputObj.value="";  }  }  function likai(inputObj){  if(inputObj.value==''){  inputObj.value="請輸入您的姓名";  }  }    </script>  <style type="text/css">  /*下面這段文字,可以在ie浏覽器中改變輸入框的背景顏色*/  .search input{star : expression(onmouseover=function(){  this.style.backgroundColor="#FF0000"  },  onmouseout=function(){  this.style.backgroundColor="#FFFFFF"  })  }  </style>  </head>  <body>  <input type="text" id="shuru" value="請輸入歌曲名或歌手名" onfocus="qingkong(this)" onblur="likai(this)"/>  </body>  </html>     
copyright © 萬盛學電腦網 all rights reserved