将以下脚本和样式引入你的页面(对于密码输入框,要设置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#反射基础知识和实战应用

    首先来说一下什么是反射? 反射提供了封装程序集.模块和类型的对象(Type类型) 可以使用反射动态的创建类型的实例,将类型绑定到现有对象,或从现有对象中获取类型,然后,可以调用类型的方法或访问其字段和 ...

  2. java提高篇(二五)-----HashTable

          在java中与有两个类都提供了一个多种用途的hashTable机制,他们都可以将可以key和value结合起来构成键值对通过put(key,value)方法保存起来,然后通过get(key ...

  3. [ZigBee] 9、ZigBee之AD剖析——AD采集CC2530温度串口显示

    1.ADC 简介 ADC 支持多达14 位的模拟数字转换,具有多达12 位有效数字位.它包括一个模拟多路转换器,具有多达8 个各自可配置的通道:以及一个参考电压发生器.转换结果通过DMA 写入存储器. ...

  4. 了解了这些才能开始发挥jQuery的威力

    由于当前jQuery如此的如雷贯耳,相信不用介绍什么是jQuery了,公司代码中广泛应用了jQuery,但我在看一些小朋友的代码时发现一个问题,小朋友们使用的仅仅是jQuery的皮毛,只是使用id选择 ...

  5. Java-小练习简单银行程序

    2练习1:创建一个简单的银行程序包   练习目标-Java 语言中面向对象的封装性及构造器的使用. 任务 在这个练习里,创建一个简单版本的(账户类)Account类.将这个源文件放入banking程序 ...

  6. 我所了解的chrome

    Chrome的隐身模式 先来说说隐身模式的启用方法吧 1.键盘快捷:Ctrl + Shift + N. 2.在Windows7下的任务栏处,右击“Chrome”图标,会出一个下拉菜单,点击“新建隐身窗 ...

  7. [全文检索]Lucene基础入门.

    本打算直接来学习Solr, 现在先把Lucene的只是捋一遍. 本文内容: 1. 搜索引擎的发展史 2. Lucene入门 3. Lucene的API详解 4. 索引调优 5. Lucene搜索结果排 ...

  8. Atitit usrQBK13 html dsl 规范与解决方案

    Atitit usrQBK13 html dsl 规范与解决方案 1.1. Vue  vs anrular1 1.2. 定义html dsl变量1 1.3. 变量赋值1 1.4.  条件渲染指令1 2 ...

  9. fir.im Weekly - 人人都需要的 IT 技能图谱

    AlphaGo 与李世石的人机世纪大战落下帷幕,不禁让人思考<失控> 中说道的 "机器正在生物化,而生物正在工程化 ".作为人类,在未来能否保全最后的智力骄傲成为一个疑 ...

  10. JSP连接mysql数据库的重点

    1:用mysql驱动把mysql与tomcat的连接起来.把mysql驱动包(不用解压)放到Tomcat安装目录中lib文件夹下即可. 2:然后在自己的新建的web应用程序上面就可以下下面的代码 3: ...