文本框里边背景字的显示与隐藏

<!--StartFragment -->

<!--StartFragment -->

这个图片是大家经常见到的，点击文本框内，文本框内的文字就会消失。下面我们看下代码：

 

其实有两种方法呢，这第一种方法呢IE7不兼容，但IE7以上的还是有效果的：

 <input type="text"  tabindex="1"  onclick="if(this.value=='用户名：') this.value=''" onblur="if(this.value=='') this.value='用户名：';" value="用户名：">

 <input type="text" tabindex="2"   onclick="if(this.value=='密码：') this.value='',this.type='text' " onblur="if(this.value=='') this.value='密码：',this.type='password';" value="密码：">

 

这第二种方法实用BootStrap里边的一种属性：placeholder=“ ”；

<input type="text" tabindex="1" class="pwd-text"  placeholder="用户名：">

<input type="password" tabindex="2" class="pwd-text"  placeholder="密   码：">

如果用第二种方法的话，一定在头部加上这个：

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>

 

显然，第二种方法要简单的多，我也多多建议大家用二种方法。接下来就是样式问题，这个是不容小窥的，稍微哪个div的样式没注意到，就会出现不理想的效果再绚酷的东西也表现不出来。