【www.gdgbn.com--jquery】

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);

完整实例代码



















<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>

本文来源：http://www.gdgbn.com/wangyezhizuo/29739/