placeholder

最近应公司要求网页需要兼容IE7,我表示有点头疼

在页面中第一次注意到placeholder这个属性不兼容IE10以下；只得想办法写个出来

 

方法一

用data-holder替代placeholder

<div class="input-wrapper">
    <input data-holder="手机号" class="tff-input" type="tel" value="" name="tel"  >
</div>

function initinput(){
        $('input').each(function(){
            var _this = $(this);
            var _valur = _this.data('holder');
            if (_valur) {
                _this.css("color","#757575").val(_valur);
            }
        })
        $(document).off('focus', 'input').on('focus', 'input', function () {
            var $this = $(this);
            $this.css('color', '#333')
            if ($this.val() === $this.data('holder')) {
              $this.val('');
            }
        });
          //失去焦点后还原提示内容
        $(document).off('focusout', 'input').on('focusout', 'input', function () {
            var $this = $(this);
            var _valur = $this.data('holder');
            if ($.trim($this.val()) == '') {
              $this.css('color', '#757575').val(_valur);
            }
        });
    }
    initinput()

方法二

用标签替代

<div class="clearfix">
    <div class="current-edit">
		<input type="password" name="" class="tip-ipt">
		<p>请设置您的密码</p>
    </div>
</div>

$('.tip-ipt').each(function () {
        if (!$(this).val() == '') {
            $(this).siblings('p').hide();
        } else {
            $(this).siblings('p').show();
        }
        ;
        $(this).focus(function () {
            $(this).siblings('p').hide();
        });
        $(this).blur(function () {
            if (!$(this).val() == '') {
                $(this).siblings('p').hide();
            } else {
                $(this).siblings('p').show();
            }
            ;
        });
    });
    $(".current-edit p").click(function () {
        $(this).prev().focus();
    });

经我测试，可是坚持到IE7