将以下脚本和样式引入你的页面(对于密码输入框,要设置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>

对于placeholder浏览器兼容性(包括密码输入框)解决办法的更多相关文章

  1. IE浏览器和Firefox浏览器兼容性问题及解决办法

    IE浏览器和Firefox浏览器兼容性问题及解决办法 为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox : 1.//w ...

  2. Aasible中cryptography兼容性报错解决办法

    Aasible中cryptography兼容性报错解决办法 1 Ansible中使用ansible --version查看版本,报错信息如下: ERROR! Unexpected Exception, ...

  3. Eclipse中js文件修改后浏览器不能及时更新的解决办法

    项目中js文件修改后浏览器不能及时更新的解决办法 转载:http://www.codeweblog.com/%E9%A1%B9%E7%9B%AE%E4%B8%ADjs%E6%96%87%E4%BB%B ...

  4. 在微信端使用video标签,播放结束会出现QQ浏览器推荐视频的解决办法(vue)

    会出现播放结束显示QQ浏览器推荐视频的原因:(我是vue的项目,而且我是新手,只是单纯的给大家分享一个方法,代码比较low请自动忽略) 因为在x5(QQ浏览器)内核中,把video标签劫持了,只要是检 ...

  5. 关于IE和Firefox兼容性问题及解决办法

    1.//window.eventIE:有window.event对象FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMove(e ...

  6. chrome浏览器font-size<12px无效解决办法

    当样式设定font-size<12px时,chrome浏览器里字体显示仍为12px:如font-size:11px; 但是chrome还是12px的大小,很不听话. 今天我就遇到了这样的问题?网 ...

  7. linux ubuntu 浏览器 字 字体 虚 解决办法

    在刚装好的ubuntu上什么都好,只是浏览器字体很虚,就连百度都虚 解决办法很简单 安装雅黑字体 修改font conf sudo vi /etc/fonts/conf.avail/69-langua ...

  8. win8下安装VC6出现兼容性问题的解决办法

    重装系统之后(win8的系统),发现VC6安装出现兼容性问题,花了一些时间解决,有出现的问题都差不多在下面链接的总结中,写的很详细: http://www.docin.com/p-1126120829 ...

  9. selenium自动化打开浏览器不受信任解决办法

    之前在用selenium(火狐浏览器)打开一个https网站时,总是弹出不受信任,修改配置后,每次加载的浏览器都是还原了配置,无法加载出页面,这里给出解决办法:让浏览器去加载我们修改后的配置,具体如下 ...

  10. 关于Nginx启动成功,浏览器不能访问的解决办法

    本人初学Nginx,第一天配置成功并能通过浏览器进行访问. 第二天重新打开,将Nginx启动,但是浏览器却访问不了. 执行 ps aux|grep nginx ,执行结果如下,的确Nginx服务已经启 ...

随机推荐

  1. 转:给 C# 开发者的代码审查清单

      给 C# 开发者的代码审查清单   [感谢@L就是L 的热心翻译.如果其他朋友也有不错的原创或译文,可以尝试推荐给伯乐在线.] 这是为C#开发者准备的通用性代码审查清单,可以当做开发过程中的参考. ...

  2. java - Stack栈和Heap堆的区别

    首先分清楚Stack,Heap的中文翻译:Stack—栈,Heap—堆.         在中文里,Stack可以翻译为“堆栈”,所以我直接查找了计算机术语里面堆和栈开头的词语:        堆存储 ...

  3. TCP字节流和UDP数据报区别

    两者的区别在于TCP接收的是一堆数据,而每次取多少由主机决定;而UDP发的是数据报,客户发送多少就接收多少. 拥有这些区别的原因是由于TCP和UDP的特性不同而决定的.TCP是面向连接的,也就是说,在 ...

  4. 浅谈Excel开发:九 Excel 开发中遇到的常见问题及解决方法

    Excel开发过程中有时候会遇到各种奇怪的问题,下面就列出一些本人在开发中遇到的一些比较典型的问题,并给出了解决方法,希望对大家有所帮助. 一 插件调试不了以及错误导致崩溃的问题 在开发机器上,有时可 ...

  5. Linux系统性能统计工具Sar和实时系统性能监控脚本

    sar(System Activity Reporter系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告,包括:文件的读写情况.系统调用的使用情 ...

  6. [安卓] 18、一个简单的例子做自定义动画按钮和自定义Actionbar

    在做安卓UI的时候有时候需自定义具有动画效果的按钮或需要自定义一下actionbar~ 本节用一个简单的demo讲如何自定义具有动画效果的按钮,以及个性化的actionbar 下面是效果: 其中: △ ...

  7. 基于Token的WEB后台认证机制

    几种常用的认证机制 HTTP Basic Auth HTTP Basic Auth简单点说明就是每次请求API时都提供用户的username和password,简言之,Basic Auth是配合RES ...

  8. Java-练习方法之模拟摇号抽奖

    3.采用多种算法,模拟摇奖:从1-36中随机抽出8个不重复的数字 int[] shuzu=new int[8]; Random ran=new Random(); for(int i=0;i<s ...

  9. Atitit 发帖机系列(6) USRQBN2201 setup spec安装程序的实现规范与标准化解决方案

    Atitit 发帖机系列(6) USRQBN2201 setup spec安装程序的实现规范与标准化解决方案 安装主要解决一个问题,就是resin的内容启动路径以及端口..这里是使用的端口8077 主 ...

  10. JS设置cookie、读取cookie、删除cookie

    JS设置cookie.读取cookie.删除cookie       JS设置cookie,注意一定要path=/ ,根目录,不然其他目录可能查询不到..默认是本目录. document.cookie ...