关于表单用js如何实现占位符placeholder的效果

最新推荐文章于 2024-06-21 14:41:01 发布

cysear

最新推荐文章于 2024-06-21 14:41:01 发布

阅读量2.5k

点赞数

分类专栏： JavaScript 文章标签：表单占位符效果 js

本文链接：https://blog.csdn.net/cysear/article/details/53187107

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

笨方法，需要每个input都要写focus 和blur 事件，可以实现，但是毕竟太笨

<input type="text" value="请输入你的账户" οnfοcus="focusFunc('请输入你的账户',this)" οnblur="blurFunc('请输入你的账户',this)" />
<input type="text" value="请输入你的密码" οnfοcus="focusFunc('请输入你的密码',this)" οnblur="blurFunc('请输入你的密码',this)"/>

/*获取焦点 提示信息消失*/
function focusFunc(ss,oCtl){
	if(oCtl.value==ss){
		oCtl.value='';
	}	
	
}
/*失去焦点 提示信息显示*/
function blurFunc(ss,oCtl){
	if(oCtl.value==''){
		oCtl.value=ss;
		
	}
}

后来发现有这个属性defaultValue，新大陆啊

        $(".cont_msg input").focus(function(){
            if($(this).val()==$(this).defaultValue){
                $(this).val("");
            }
        }).blur(function(){
            if($(this).val()==''){
                $(this).val($(this).defaultValue);
            }
        });

本以为这样就可以实现了，但是就是没有预期的效果！！！

原因：

$(".cont_msg input").focus(function(){
            if($(this).val() ==this.defaultValue){
                $(this).val("");
            }
        }).blur(function(){
            if ($(this).val() == '') {
                $(this).val(this.defaultValue);
            }
        })

defaultValue 是DOM的属性啊！！！DOM的！