value
如果用的是value,我们想鼠标focus后默认文字消失,移开后默认文字又重现,可以这样来写。
<input type="text" value="请输入手机号" class="inp-fon">
$(".inp-fon").focus(function(){
var oldValue = $(this).val();
if(oldValue == this.defaultValue){
$(this).val("").addClass('focus-fon');
}
}).blur(function(){
var oldValue = $(this).val();
if(oldValue == ""){
$(this).val(this.defaultValue).removeClass('focus-fon');;
}
});
请看下图演示:
默认状态:
focus状态
说明:默认状态是灰色的,然后focus后,输入的字体会变成黑色的,上面的JS里就是通过添加和删除样式“focus-fon”来控制的。
placeholder
如果用的是placeholder,我们就不需要JS了,因为它本身就自带focus和blur功能了。但是有时候设计师给我们的设计稿往往跟默认文字颜色是有区别的,那我们如何改变placeholder默认文字颜色呢,如下:
<input type="text" placeholder="请输入手机号" class="inp-fon">
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f00;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f00;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #f00;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #f00;
}
一般都是用以上这种方法来处理,这里就不放demo了,比较简单,如果想看效果,把代码复制到网页里查看。