2中跨浏览器placeholder实现

1：  

<style>
        .grey {
            color: #999;
        }
        .blue {
            color: blue;
        }
    </style>
<input id="t1" type="text" placeholder="请输入文字1" value="内容"/>
<input id="t2" type="text" placeholder="请输入文字2"/>
<input class="t2" type="text" placeholder="请输入文字3"/>
<input class="t2" type="text" placeholder="请输入文字4"/>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
    //目前支持该属性的浏览器：Firefox4.0+、Chrome4.0+、Safari4.0+，Opera 11
    /**
     *
     * @type {{_support: null, className: string, init: Function, create: Function, _setValue: Function, _moveCursor: Function}}
     * 有两种调用方式
     // 1）页面初始化时对所有input做初始化
     PlaceHolder.className = 'blue';  //用于设这placeholder的className值；
     PlaceHolder.init();

     // 2）或者单独设置某个元素
     PlaceHolder.create($('#t1'));
     PlaceHolder.create($('#t2'));
     PlaceHolder.create($('.t2'));
     */
    PlaceHolder = {
        _support: (function () {
            return 'placeholder' in document.createElement('input');
        })(),

        // 提示文字的样式，需要在页面中其他位置定义
        className: 'grey',
        init: function () {
            if (!PlaceHolder._support) {
                var inputs = $('input');
                PlaceHolder.create(inputs);
            }
        },

        create: function (inputs) {
            for (var i = 0, length = inputs.length; i < length; i++) {
                var input = inputs.eq(i);
                if (!PlaceHolder._support) {
                    PlaceHolder._setValue(input);
                    input.on('keydown', function () {
                        $(this).removeClass(PlaceHolder.className);
                        if ($(this).val() === $(this).attr('placeholder')) {
                            $(this).val('');
                            $(this).addClass(PlaceHolder.className);
                        }
                    });

                    input.on('keyup', function () {
                        $(this).removeClass(PlaceHolder.className);
                        if ($(this).val() === '') {
                            PlaceHolder._setValue($(this));
                        }
                    });
                    input.on('focus', function () {
                        if ($(this).val() === $(this).attr('placeholder')) {
                            PlaceHolder._moveCursor($(this));
                        }
                    })
                }
            }
        },

        _setValue: function (input) {
            if ($.trim(input.val()) == '') {
                input.addClass(PlaceHolder.className);
                input.val(input.attr('placeholder'));
                PlaceHolder._moveCursor(input);
            } else {
                input.removeClass(PlaceHolder.className);
            }
        },

        _moveCursor: function (input) {
            if (input.get(0).createTextRange()) {
                var rng = input.get(0).createTextRange();
                rng.move("character", 0);
                rng.select();
            }
        }
    }
    PlaceHolder.className = 'blue';
    PlaceHolder.init();
    /*
     // 页面初始化时对所有input做初始化
     //PlaceHolder.className = 'blue';  //用于设这placeholder的className值；
     //PlaceHolder.init();

     // 或者单独设置某个元素
     PlaceHolder.create($('#t1'));
     PlaceHolder.create($('#t2'));
     PlaceHolder.create($('.t2'));
    */
</script>

 

2：

<form id="form1">
    <h3>在不支持placeholder的浏览器下，通过插入悬浮的span元素方式模拟</h3>

    <p><label for="username1">用户名:</label><input type="text" name="username1" id="username1" placeholder="请输入用户名"
                                                 value="" required></p>

    <p><label for="password1">密　码:</label><input type="password" name="password1" id="password1" placeholder="请输入密码"
                                                 value="" required></p>

    <p><label for="address1">地　址:</label><input type="text" name="address1" id="address1" placeholder="请输入地址" value=""
                                                required></p>

    <p><label for="remarks1">备　注:</label><textarea placeholder="请输入备注" id="remarks1"></textarea></p>
</form>
<script src="jquery-1.9.1.js"></script>
<script>
    var oForm1 = $('#form1');
    var oForm1Inputs = $('#form1 input');
    for (var i = 0; i < oForm1Inputs.length; i++) {
        placeHolder(oForm1Inputs.eq(i));
    }
    var oForm1Textarea = $('textarea');
    placeHolder(oForm1Textarea);
    /**
     * @name placeHolder
     * @class 跨浏览器placeHolder,对于不支持原生placeHolder的浏览器
     * @param {Object} obj 要应用placeHolder的表单元素对象
     */
    function placeHolder(obj) {
        if (!obj.attr('placeholder')) return;
        var supportPlaceholder = 'placeholder' in document.createElement('input');
        if (!supportPlaceholder) {
            var defaultValue = obj.attr('placeholder');
            var oWrapper = $('<div>'+defaultValue+'<div>');
            var oMarginLeft = parseInt(obj.css('marginLeft')) ? parseInt(obj.css('marginLeft')) + 3 + 'px' : 3 + 'px';
            var oMarginTop = parseInt(obj.css('marginTop')) ? obj.css('marginTop') : 1 + 'px';
            var oPaddingLeft = obj.css('paddingLeft');
            var oWidth = obj.outerWidth() - parseInt(obj.css('marginLeft')) + 'px';
            var oHeight = obj.height + 'px';
            var oLineHeight = obj.get(0).tagName.toLowerCase() == 'textarea' ? '' : obj.outerHeight() + 'px';
            oWrapper.css({position:'absolute', color:'#ACA899', display:'inline-block', overflow:'hidden', fontFamily: obj.css('fromFamily'),
                fontSize: obj.css('fontSize'), marginLeft:oMarginLeft, marginTop:oMarginTop, paddingLeft:oPaddingLeft, width:oWidth, height:oHeight, lineHeight:oLineHeight});
            oWrapper.addClass('wrap-placeholder');
            obj.before(oWrapper);
            oWrapper.bind('click', function () {
                obj.focus();
            })

            //绑定input或onpropertychange事件
            /*
             oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，
             在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。
             */
            if (typeof(obj.get(0).oninput) == 'object') {
                obj.get(0).addEventListener("input", changeHandler, false);
            } else {
                obj.get(0).onpropertychange = changeHandler;
            }
            function changeHandler() {
                if($.trim(obj.val()) != ''){
                    oWrapper.hide();
                }else{
                    oWrapper.show();
                }
            }
        }
    }
</script>