将以下脚本和样式引入你的页面(对于密码输入框,要设置ID属性值):

<script type="text/javascript">

$(function () {
// 如果不支持placeholder,用jQuery来完成
if (!isSupportPlaceholder()) {
// 遍历所有input对象, 除了密码框
$('input').not("input[type='password']").each(
function () {
var self = $(this);
var val = self.attr("placeholder");
input(self, val);
}
);

/**//* 对password框的特殊处理
* 1.创建一个text框
* 2.获取焦点和失去焦点的时候切换
*/
$('input[type="password"]').each(
function () {
var pwdField = $(this);
var pwdVal = pwdField.attr('placeholder');
var pwdId = pwdField.attr('id');
// 重命名该input的id为原id后跟1
pwdField.after('<input id="' + pwdId + '1" type="text" value=' + pwdVal + ' autocomplete="off" />');
var pwdPlaceholder = $('#' + pwdId + '1');
pwdPlaceholder.show();
pwdField.hide();

pwdPlaceholder.focus(function () {
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});

pwdField.blur(function () {
if (pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
);
}
});

// 判断浏览器是否支持placeholder属性
function isSupportPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
}

// jQuery替换placeholder的处理
function input(obj, val) {
var $input = obj;
var val = val;
$input.attr({ value: val });
$input.focus(function () {
if ($input.val() == val) {
$(this).attr({ value: "" });
}
}).blur(function () {
if ($input.val() == "") {
$(this).attr({ value: val });
}
});
}

</script>

<style type="text/css">
/* 设置提示文字颜色 */
::-webkit-input-placeholder {
color: #838383;
}

:-moz-placeholder {
color: #838383;
}

.placeholder {
color: #ccc;
}
</style>

转载于:https://www.cnblogs.com/sharing1986687846/p/5784270.html

对于placeholder浏览器兼容性(包括密码输入框)解决办法相关推荐

  1. 前端常见浏览器兼容性问题及解决办法

    不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异. 1.不同浏览器的标签默认的外补丁和内补丁不同 *{ margin:0; padding:0; } 2. 块属性标签float后, ...

  2. IE浏览器常见CSS兼容性问题及解决办法

    IE浏览器常见CSS兼容性问题及解决办法 参考文章: (1)IE浏览器常见CSS兼容性问题及解决办法 (2)https://www.cnblogs.com/kiscall/p/4679616.html ...

  3. 谷歌/Edge浏览器“STATUS_INVALID_IMAGE_HASH“错误状态码解决办法

    ** 谷歌/Edge浏览器"STATUS_INVALID_IMAGE_HASH"错误状态码解决办法 ** 参考博客:https://www.cnblogs.com/VueDi/p/ ...

  4. 关于浏览器兼容问题的解决办法,全部都在这里了

    关于浏览器兼容问题的解决办法,全部都在这里了 参考文章: (1)关于浏览器兼容问题的解决办法,全部都在这里了 (2)https://www.cnblogs.com/myprogramer/p/6624 ...

  5. 移动端常见兼容性问题及解决办法

    移动端常见兼容性问题及解决办法 参考文章: (1)移动端常见兼容性问题及解决办法 (2)https://www.cnblogs.com/crazycode2/p/6624742.html 备忘一下.

  6. ie不显示html图片不显示,IE浏览器图片显示不出来 IE浏览器图片不显示解决办法...

    很多人在使用ie浏览器打开网页时,发现所有的图片都是不显示出来的,可能重置之后浏览器图片显示不出来,也有可能是在ie浏览器设置中,没有启用显示图片选项,如果没有图片显示的话,该如何设置让图片显示出来呢 ...

  7. FireFox火狐浏览器字体模糊的解决办法

    FireFox火狐浏览器字体模糊的解决办法.打开选项->高级->关闭"自动启用硬件加速"! 解决问题! 转载于:https://my.oschina.net/u/179 ...

  8. kali无法执行默认网络浏览器输入/输出错误解决办法

    无法执行默认网络浏览器 解决办法 出现这个问题一般是因为你安装了别的浏览器,冲突了 解决办法 解决办法是 打开设置管理 打开首选应用程序 将你的默认浏览器重新设置为火狐,就行了 这个时候再打开,就没问 ...

  9. Microsoft Edge浏览器主页被篡改的解决办法(Microsoft Edge浏览器每次打开都是同一个页面)

    Microsoft Edge每次打开都是同一个页面,在设置-- 处修改也没用,这种情况一般是Microsoft Edge浏览器主页被篡改,解决办法如下: 1.桌面右键单击Microsoft Edge, ...

  10. 常见浏览器兼容性问题与解决方式

    所谓的浏览器兼容性问题,是指由于不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,不管用户用什么浏览器来查看我们的站点或者登陆我们的系统,都应该是统一的 ...

最新文章

  1. JavaScript eval() 函数
  2. Scala集合:List修改及删除数据
  3. VTK:图片之MarkKeypoints
  4. java json 工具类_Java中JSON处理工具类使用详解
  5. lt;转gt;Java转iOS-第一个项目总结(2):遇到问题和解决方案
  6. [题解]NOI 2001 食物链
  7. [USACO11DEC] 牧草种植Grass Planting
  8. Visual Studio 2008 安装失败(“Web 创作组件”)安装失败
  9. essay--网络常用省略语大全(ZT)
  10. 信签纸有虚线怎么写_信签纸写作文格式怎么用
  11. java区间并集_区间并集求解算法实现
  12. C语言的发展及其特点
  13. 论 AI即将完成贝多芬《第十交响曲》
  14. 第七史诗无限显示服务器连接中,第七史诗神器满破是什么意思?神器满破攻略...
  15. RFM模型与Spark实现
  16. 经常玩电脑正确的坐姿_使用电脑的正确坐姿 你坐对了吗?
  17. CDMA版iPhone 4广东通话乐成 批量烧号不可行
  18. linux 无线投屏windows,拼接屏加入无线投屏功能,新功能智慧体验
  19. java escpos_Java通过ESC/POS指令打印条码
  20. select max

热门文章

  1. spring :cannot be resolved to absolute file path because it does not reside in the file system: jar
  2. 新买的服务器安装系统流程,新买的服务器安装操作系统
  3. 阶段5 3.微服务项目【学成在线】_day01 搭建环境 CMS服务端开发_08-CMS需求分析-CMS页面管理需求...
  4. sql server系统数据库,temp库的用途
  5. 51Nod 1002:数塔取数问题(DP)
  6. 01-编写CMS注意事项
  7. 第十七章 特殊成员_使用typedef简化函数指针的声明
  8. Leetcode961. N-Repeated Element in Size 2N Array重复N次的元素
  9. Vue中mintui的field组件的blur和focus事件
  10. ArrayList源码解读(jdk1.8)