做章丘花底纸的项目中遇到了用textarea标签不支持value属性,所以想用就是实现点击输入框文字消失,今天总结一下点 击输入框时默认文字消失。
当鼠标点击输入框时,原有的默认文字消失。如果输入其它新内容,然后移开鼠标,输入框新内容不变;如果不输入新内容 ,鼠标离开输入框又还原默认文字。 这种效果也只用加入一小段javascript判断即可完成:
加上placeholder这个属性也可以去实现这个效果
再总结两个比较常用的方法
1.点击输入框选中内容的Html代码:
2.鼠标悬浮在输入框上时改变边框颜色或背景色
这个效果有两种方法:方法一是使用CSS中的伪元素:focus;方法二还是使用一小段javascript; 方法一的html代码和上面的例子中一样,只不过在CSS中加入以下一段:
input:hover { border:1px solid #F00; }
在鼠标悬浮在输入框时,输入框边框就会变成红色,但是此方法只在Firefox浏览器和IE7以上版本中有效,IE6不支持,所以它有一定的局限性。 方法二的代码大部分和上面的例子中一样,只不过在在后面再加入一个一段鼠标悬浮的代码:
使用这段代码,大多数浏览器都可以支持。
上一篇: 类与id选择器的区别