您现在的位置是:网站首页>前端技术
解决IE下input兼容placeholder问题
【前端技术】阿文2019年6月19日890浏览
简介当我们做兼容IE、谷歌浏览器页面时时常遇到一些效果不兼容的情况,本文针对IE浏览器下input的placeholder属性不生效问题找到一个js方案,此案例采用Jquery方式实现
当我们做兼容IE、谷歌浏览器页面时时常遇到一些效果不兼容的情况,本文针对IE浏览器下input 的placeholder属性不生效问题找到一个js方案,此案例采用Jquery方式实现,具体代码如下:
//解决IE input兼容placeholder //使用方法 $("input").placeholder();
;(function ($) {
$.fn.placeholder = function (options) {
var opts = $.extend({}, $.fn.placeholder.defaults, options);
var isIE = document.all ? true : false;
return this.each(function () {
var _this = this,
placeholderValue = _this.getAttribute("placeholder"); //缓存默认的placeholder值
if (isIE) {
if ($(_this).attr("type") != 'password') {
_this.setAttribute("value", placeholderValue);
_this.onfocus = function () {
$.trim(_this.value) == placeholderValue ? _this.value = "" : '';
};
_this.onblur = function () {
$.trim(_this.value) == "" ? _this.value = placeholderValue : '';
};
}
else {
try {
var pwdField = $(_this);
var pwdclass = pwdField.prop("class");
var pwdVal = pwdField.attr('placeholder');
var pwdtabindex = pwdField.attr('tabindex');
pwdField.after('<input class="login-input ' + pwdclass + ' " type="text" value=' + pwdVal + ' value="111" autocomplete="off" />');
var pwdPlaceholder = pwdField.siblings('.login-input');
if (pwdtabindex != undefined) pwdPlaceholder.attr("tabindex", pwdtabindex);
pwdPlaceholder.show();
pwdField.hide();
pwdPlaceholder.focus(function () {
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function () {
if (pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
catch (e)
{ }
}
}
});
};
})(jQuery);
标签: Javascript
上一篇: 原生js鼠标点击特效
下一篇: CSS去掉点击按钮之后出现的边框
评论文明上网,理性发言0条评论