最近应公司要求网页需要兼容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