JQuery全局占位符替换

时间:2012-12-22 16:05:26

标签: javascript jquery html5 placeholder

由于我对某些浏览器不支持“占位符”-Tag这一事实感到不满意,我想:“当JS主要可用时,为什么不开发JS-Workaround”。

所以我构建了一个表单输入搜索,它使得所有占位符在JS中的行为具有一个优势:onFocus将清除该字段! 占位符不清除onFocus领域的事实是另一个原因。所以这是代码,随意使用和更改它:

1 个答案:

答案 0 :(得分:1)

$('form').each(function(){
                var f = $(this);
                f.find('input[type=text]').each(function(){
                    var s = $(this);
                    var attr = s.attr('placeholder'); 
                    if (attr && $.trim(attr)!='') {
                        $.extend(this,{oldPlaceholder: s.attr('placeholder')})
                        s.removeAttr('placeholder');

                        if ($.trim(this.value)=='') {
                            this.value = this.oldPlaceholder;
                        }


                        s.focus(function(){
                            if ($.trim(s.val())==this.oldPlaceholder) {
                                s.val('');
                            }
                        });

                        s.blur(function(){
                            if ($.trim(s.val())=='') {
                                s.val(this.oldPlaceholder);
                            }
                        });
                    }
                });

                f.submit(function(){
                    $(this).find('input[type=text]').each(function(){
                        if (this.oldPlaceholder && $.trim(this.value)==this.oldPlaceholder) {
                            this.value = '';
                        }
                    });
                });
            });