对于placeholder浏览器兼容性(包括密码输入框)解决办法
将以下脚本和样式引入你的页面(对于密码输入框,要设置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.不同浏览器的标签默认的外补丁和内补丁不同 *{ margin:0; padding:0; } 2. 块属性标签float后, ...
- IE浏览器常见CSS兼容性问题及解决办法
IE浏览器常见CSS兼容性问题及解决办法 参考文章: (1)IE浏览器常见CSS兼容性问题及解决办法 (2)https://www.cnblogs.com/kiscall/p/4679616.html ...
- 谷歌/Edge浏览器“STATUS_INVALID_IMAGE_HASH“错误状态码解决办法
** 谷歌/Edge浏览器"STATUS_INVALID_IMAGE_HASH"错误状态码解决办法 ** 参考博客:https://www.cnblogs.com/VueDi/p/ ...
- 关于浏览器兼容问题的解决办法,全部都在这里了
关于浏览器兼容问题的解决办法,全部都在这里了 参考文章: (1)关于浏览器兼容问题的解决办法,全部都在这里了 (2)https://www.cnblogs.com/myprogramer/p/6624 ...
- 移动端常见兼容性问题及解决办法
移动端常见兼容性问题及解决办法 参考文章: (1)移动端常见兼容性问题及解决办法 (2)https://www.cnblogs.com/crazycode2/p/6624742.html 备忘一下.
- ie不显示html图片不显示,IE浏览器图片显示不出来 IE浏览器图片不显示解决办法...
很多人在使用ie浏览器打开网页时,发现所有的图片都是不显示出来的,可能重置之后浏览器图片显示不出来,也有可能是在ie浏览器设置中,没有启用显示图片选项,如果没有图片显示的话,该如何设置让图片显示出来呢 ...
- FireFox火狐浏览器字体模糊的解决办法
FireFox火狐浏览器字体模糊的解决办法.打开选项->高级->关闭"自动启用硬件加速"! 解决问题! 转载于:https://my.oschina.net/u/179 ...
- kali无法执行默认网络浏览器输入/输出错误解决办法
无法执行默认网络浏览器 解决办法 出现这个问题一般是因为你安装了别的浏览器,冲突了 解决办法 解决办法是 打开设置管理 打开首选应用程序 将你的默认浏览器重新设置为火狐,就行了 这个时候再打开,就没问 ...
- Microsoft Edge浏览器主页被篡改的解决办法(Microsoft Edge浏览器每次打开都是同一个页面)
Microsoft Edge每次打开都是同一个页面,在设置-- 处修改也没用,这种情况一般是Microsoft Edge浏览器主页被篡改,解决办法如下: 1.桌面右键单击Microsoft Edge, ...
- 常见浏览器兼容性问题与解决方式
所谓的浏览器兼容性问题,是指由于不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,不管用户用什么浏览器来查看我们的站点或者登陆我们的系统,都应该是统一的 ...
最新文章
- JavaScript eval() 函数
- Scala集合:List修改及删除数据
- VTK:图片之MarkKeypoints
- java json 工具类_Java中JSON处理工具类使用详解
- lt;转gt;Java转iOS-第一个项目总结(2):遇到问题和解决方案
- [题解]NOI 2001 食物链
- [USACO11DEC] 牧草种植Grass Planting
- Visual Studio 2008 安装失败(“Web 创作组件”)安装失败
- essay--网络常用省略语大全(ZT)
- 信签纸有虚线怎么写_信签纸写作文格式怎么用
- java区间并集_区间并集求解算法实现
- C语言的发展及其特点
- 论 AI即将完成贝多芬《第十交响曲》
- 第七史诗无限显示服务器连接中,第七史诗神器满破是什么意思?神器满破攻略...
- RFM模型与Spark实现
- 经常玩电脑正确的坐姿_使用电脑的正确坐姿 你坐对了吗?
- CDMA版iPhone 4广东通话乐成 批量烧号不可行
- linux 无线投屏windows,拼接屏加入无线投屏功能,新功能智慧体验
- java escpos_Java通过ESC/POS指令打印条码
- select max
热门文章
- spring :cannot be resolved to absolute file path because it does not reside in the file system: jar
- 新买的服务器安装系统流程,新买的服务器安装操作系统
- 阶段5 3.微服务项目【学成在线】_day01 搭建环境 CMS服务端开发_08-CMS需求分析-CMS页面管理需求...
- sql server系统数据库,temp库的用途
- 51Nod 1002:数塔取数问题(DP)
- 01-编写CMS注意事项
- 第十七章 特殊成员_使用typedef简化函数指针的声明
- Leetcode961. N-Repeated Element in Size 2N Array重复N次的元素
- Vue中mintui的field组件的blur和focus事件
- ArrayList源码解读(jdk1.8)