jq 点击文本域清除默认值与回车提交表单代码
点击文本域,清除默认值.默认值显示时为灰色文字,点击后高亮显示,可绑定回车事件.
项目中常用到的一个效果,封装成一个小小的插件,一点不复杂,需要的看下demo演示中源码注释.若是不想只为清除一个默认文本调一个jquery库,可以用原生的按我的思路写一下,很简单.
特点
1.支持input文本域及textarea同时为多表单添加同样的默认值;
2.默认值可通过表单value值设定,也可通过插件参数(iset.curval)设置. iset.curval默认值为null,但它优先于表单value值,当iset.curval值设置时取iset.curval值忽略表单value值;
3.默认值时颜色自定义;
4.支持绑定回车事件,默认为null,可自行传入需要绑定回车事件的元素.
;(function($){
$.fn.extend({
iclear: function(options){
var iset = {
name: null,//获取表单元素比如$(':text')
curval: null,//默认显示文字,优先于表单默认值,为空时调用表单默认值
color: '#000',//点击后输入值颜色
curcolor: '#ccc',//默认颜色
enter: null
}
options=$.extend(iset, options || {});
iset.name.each(function(){
//当设置默认值是为表单赋默认值
if (iset.curval != null) {
iset.name.val(iset.curval);
}
//表单focus,blur事件
$(this).css教程('color', iset.curcolor).focus(function(){
$(this).css('color',iset.color);
if ($(this).val() == (iset.curval ? iset.curval : this.defaultvalue)) {
$(this).val('');
}
}).blur(function(){
if ($(this).val() == '') {
$(this).val(iset.curval ? iset.curval : this.defaultvalue).css('color', iset.curcolor);
}
});
//绑定回车事件
if (iset.enter != null) {
$(this).keydown(function(e){
if (e.keycode == 13) {
iset.enter.click();
}
});
}
});
}
});
})(jquery);
完整实例代码
<style>
/*demo css*/
#demo label input{_margin-top:1px;margin:5px 8px 5px 0;padding-left:5px;border:1px solid #999;width:200px;height:20px;font-size:14px;color:#000}
#demo textarea{width:200px;height:60px;border:1px solid #999}
</style><form action="#" method="post">
<div id="demo">
<label for="id_0"><strong>input-one：</strong><input type="text" value="input-我是默认值" id="id_0" /></label><input type="submit" value="提交" />
<br />
<label for="id_1"><strong>input-two：</strong><input type="text" value="input-我是默认值" id="id_1" /></label><input type="submit" value="提交" />
<br />
<label for="id_2"><strong>input-three：</strong><input type="text" value="input-我是默认值" id="id_2" /></label><input type="submit" value="提交" />
<br />
<br />
<textarea>textarea-我是默认值</textarea>
<textarea>textarea-我是默认值</textarea>
<textarea>textarea-我是默认值</textarea>
</div>
</form><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>;(function($){
$.fn.extend({
iclear: function(options){
var iset = {
name: null,//获取表单元素比如$(':text')
curval: null,//默认显示文字,优先于表单默认值,为空时调用表单默认值
color: '#000',//点击后输入值颜色
curcolor: '#ccc',//默认颜色
enter: null
}
options=$.extend(iset, options || {});
iset.name.each(function(){
//当设置默认值是为表单赋默认值
if (iset.curval != null) {
iset.name.val(iset.curval);
}
//表单focus,blur事件
$(this).css('color', iset.curcolor).focus(function(){
$(this).css('color',iset.color);
if ($(this).val() == (iset.curval ? iset.curval : this.defaultvalue)) {
$(this).val('');
}
}).blur(function(){
if ($(this).val() == '') {
$(this).val(iset.curval ? iset.curval : this.defaultvalue).css('color', iset.curcolor);
}
});
//绑定回车事件
if (iset.enter != null) {
$(this).keydown(function(e){
if (e.keycode == 13) {
iset.enter.click();
}
});
}
});
}
});
})(jquery);//插件调用
$(function(){
$('#demo').iclear({
name: $(':text'),
enter: $(':submit')
});
$('#demo').iclear({
name: $('textarea'),
curval: '我是重新设定的值'
});
});</script>