控制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>