JavaWeb 解决jsp不支持placeholder，IE不支持placeholder

Bertha 。 2022-04-18 04:29 553阅读 0赞

**一、介绍**

placeholder是H5的属性，但是在jsp中，兼容性并不好，很多时候，不起作用，尤其是在IE浏览器中。在开发中，placeholder所体现的功能属性给yong用户展示良好的用户体验，并且可以省去很多的纯js代码写出来达到的xiao效果，如下是解决在各种浏览器中JSP支持placeholder的js代码

**二、js代码**

placeholderForJSP.js

/*
     * @Title: jQuery placeholder, fix for IE6,7,8,9
     * @Description: IE对placeholder属性的支持
     *
     */
    var JPlaceHolder = {
        //检测
        _check : function(){
            return 'placeholder' in document.createElement('input');
        },
        //初始化
        init : function(){
            if(!this._check()){
                this.fix();
            }
        },
        //修复
        fix : function(){
            jQuery(':input[placeholder]').each(function(index, element) {
    
                var self = $(this), txt = self.attr('placeholder');
                self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
                var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
    
                var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
                self.focusin(function(e) {
                    holder.hide();
                }).focusout(function(e) {
                    if(!self.val()){
                        holder.show();
                    }
                });
                holder.click(function(e) {
                    holder.hide();
                    self.focus();
                });
            });
        }
    };
    //执行
    jQuery(function(){
        JPlaceHolder.init();    
    });

**三、jsp中引用**

![20181108151317790.png][]

[20181108151317790.png]: /images/20220418/0a3c980e25fa44a3a9d90a0de94a0508.png