输入框的水印 在提交的时候怎么清空?

wrean2013 发布于 2013/04/24 15:18
阅读 918
收藏 0
var watermark=function(selector,text,options){
	if(!text)
	{
		throw("Please set watermark text!");
		return;
	}
	var $=jQuery;
	options  = $.extend(true,{},{color:"#999",form:null}, options);
	$(selector).each(function(){
		var thix=$(this);
		var blur=function(){
			if($.trim(thix.attr("value"))=="")
			{
				thix.attr("value",text);
			}
			thix.css("color",options.color);
		};
		var focus=function(){
			var value=$.trim(thix.attr("value"));
			if(value==""||value==text)
			{
				thix.attr("value","");
			}
			thix.css("color","");
		};
		thix.bind("focus",focus).bind("blur",blur);

		blur();
		if(options.form){
			jQuery(options.form).bind("submit",function(){
				if(thix.val()==text){
					thix.val("");
				}
			});
		}
	});//each end
};


上边这个方法实现输入框的水印,问题是在submit前怎么如果水印文字没改动怎么把这段文字不提交呢?想了好久没想出来

以下是问题补充:

@wrean2013:似乎也没有onBeforeSubmit这样的事件用,我现在写的是绑定了一个submit事件,submit的时候判断输入框的值是否和水印文字相同,但每次提交的时候是先提交完了才执行绑定的sumit方法,你们怎么处理啊? (2013/04/24 15:27)
@wrean2013:这个方法的使用: watermark("#selfIntroduce","此信息为对外公示个人介绍,您可以简单介绍下自己擅长的证书和地区,但请不要填写任何联系方式,否则帐号会被禁用哦",{form:"#agentInfoFormId"}); (2013/04/24 15:44)
加载中
1
晕dows
晕dows
如果你的页面不是html5的,也可以使用这个属性,然后在页面初始化的时候用js模拟成水印,然后提交的时候判断一下,value和placeholder的值是否一样,一样的话,提交之前把这个value的值设为空
wrean2013
wrean2013
我上边的代码也是你的思路,只是把值没有存到placeholder里面,现在的问题在于在那个方法里面怎么实现提交前的判断?现在我用的是onsubmit,但是不行啊
wrean2013
wrean2013
这个是个方法
0
晕dows
晕dows
html5支持在input上加入placeholder属性,他的功能就是水印的功能,而且提交的时候不会提交
0
子木007
子木007
 placeholder 瞬间搞定,抛弃低级浏览器吧
wrean2013
wrean2013
天朝 IE6 ie7必须支持啊
0
wrean2013
wrean2013

引用来自“晕dows”的答案

如果你的页面不是html5的,也可以使用这个属性,然后在页面初始化的时候用js模拟成水印,然后提交的时候判断一下,value和placeholder的值是否一样,一样的话,提交之前把这个value的值设为空

 我上边的代码也是你的思路,只是把值没有存到placeholder里面,现在的问题在于在那个方法里面怎么实现提交前的判断?现在我用的是onsubmit,但是不行啊  提交前验证的代码:

if(options.form){
			jQuery(options.form).bind("submit",function(){
				if(thix.val()==text){
					thix.val("");
				}
			});
		}

0
晕dows
晕dows

onsubmit就是在提交前触发的,那是form的提交问题了,好像今天刚看过帖子说,提交按钮要改成

<button type='button'>提交</button>

否则ie(ie6? ie7?)会提交2次,说不定和你那个有点关系

或者,你在form标签上先加上

<from onsubmit='return false;'>


0
wrean2013
wrean2013

引用来自“晕dows”的答案

onsubmit就是在提交前触发的,那是form的提交问题了,好像今天刚看过帖子说,提交按钮要改成

<button type='button'>提交</button>

否则ie(ie6? ie7?)会提交2次,说不定和你那个有点关系

或者,你在form标签上先加上

<from onsubmit='return false;'>


我刚试了下onsubmit是在提交前执行的,如果改成<button>是可以的,但现在我这的提交是用onclick触发的ajax的form提交,这样的话绑定的submit总是在ajax的submit之后提交,这个有没有办法让绑定的submit在ajax的submit之前触发?代码如下:

<form name="agentInfoForm" id="agentInfoFormId"  onsubmit="javascript:return false;">
.........................................
<button class="btn-ui pointer"  onclick="javascript:sub();" ><span><strong>保存</strong></span></button>
</form>

sub的代码:

 function sub(){
	  if(cv.form.validator(jQuery("#agentInfoFormId"),false)){
		new cv.ajax().submit({
			form:"#agentInfoFormId",
			url:"/agent/info/update.xhtml",
			successFunction:function(json){
				alert(json.msg);
				//window.location="/agent/info/get.xhtml";
		    },
			errorFunction:function(json){
				alert(json.msg);
			}
		});		  
	  }
  }
watermark("#selfIntroduce","此信息为对外公示个人介绍,您可以简单介绍下自己擅长的证书和地区,但请不要填写任何联系方式,否则帐号会被禁用哦",{form:"#agentInfoFormId"});


0
晕dows
晕dows

<form name="agentInfoForm" id="agentInfoFormId"  onsubmit="javascript:return false;">
先改成

<form name="agentInfoForm" id="agentInfoFormId"  onsubmit="return false;">



0
晕dows
晕dows

jQuery(options.form).bind("submit",function(){
	if(thix.val()==text){
		thix.val("");
	}
});

改成

jQuery("#button按钮id").bind("click",function(){
	if(thix.val()==text){
		thix.val("");
	}
       sub();
});


0
晕dows
晕dows
然后按钮上面不要写onclick了
0
wrean2013
wrean2013

引用来自“晕dows”的答案

jQuery(options.form).bind("submit",function(){
	if(thix.val()==text){
		thix.val("");
	}
});

改成

jQuery("#button按钮id").bind("click",function(){
	if(thix.val()==text){
		thix.val("");
	}
       sub();
});


我就是想把watermark做成一个所有地方都可以用的插件,如果把sub写在那个里面就不适用了,有没有其他办法只要让

jQuery(options.form).submit(function(){
				if(thix.val()==text){
					thix.val("");
				}
			});
执行在new cv.ajax.submit()的前面就好了,有木有更好的办法?

返回顶部
顶部