placeholder IE兼容，显示password
从网上找了很多关于placeholder IE兼容性的问题，下边的这个js方法可以显示password。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Placeholder Polyfill Test</title>
</head>
<body> <form>
<input type="password"placeholder="password">
<input type="password"placeholder="confirm password">
</form> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script> /* placeholder polyfill plugin */ /*! http://mths.be/placeholder v2.0.7 by @mathias */
(function(f, h, $) {
var a='placeholder'in h.createElement('input'), d='placeholder'in h.createElement('textarea'), i=$.fn, c=$.valHooks, k, j; if(a&&d) {
j=i.placeholder=function() {
return this
}
;
j.input=j.textarea=true
}
else {
j=i.placeholder=function() {
var l=this; l.filter((a?'textarea':':input')+'[placeholder]').not('.placeholder').bind( {
'focus.placeholder':b, 'blur.placeholder':e
}
).data('placeholder-enabled', true).trigger('blur.placeholder');
return l
}
;
j.input=a;
j.textarea=d; k= {
get:function(m) {
var l=$(m);
return l.data('placeholder-enabled')&&l.hasClass('placeholder')?'':m.value
}
, set:function(m, n) {
var l=$(m); if(!l.data('placeholder-enabled')) {
return m.value=n
}
if(n=='') {
m.value=n; if(m!=h.activeElement) {
e.call(m)
}
}
else {
if(l.hasClass('placeholder')) {
b.call(m, true, n)||(m.value=n)
}
else {
m.value=n
}
}
return l
}
}
;
a||(c.input=k);
d||(c.textarea=k); $(function() {
$(h).delegate('form', 'submit.placeholder', function() {
var l=$('.placeholder', this).each(b); setTimeout(function() {
l.each(e)
}
, 10)
}
)
}
); $(f).bind('beforeunload.placeholder', function() {
$('.placeholder').each(function() {
this.value=''
}
)
}
)
}
function g(m) {
var l= {
}
, n=/^jQuery\d+$/; $.each(m.attributes, function(p, o) {
if(o.specified&&!n.test(o.name)) {
l[o.name]=o.value
}
}
);
return l
}
function b(m, n) {
var l=this, o=$(l); if(l.value==o.attr('placeholder')&&o.hasClass('placeholder')) {
if(o.data('placeholder-password')) {
o=o.hide().next().show().attr('id', o.removeAttr('id').data('placeholder-id')); if(m===true) {
return o[0].value=n
}
o.focus()
}
else {
l.value='';
o.removeClass('placeholder');
l==h.activeElement&&l.select()
}
}
}
function e() {
var q, l=this, p=$(l), m=p, o=this.id; if(l.value=='') {
if(l.type=='password') {
if(!p.data('placeholder-textinput')) {
try {
q=p.clone().attr( {
type: 'text'
}
)
}
catch(n) {
q=$('<input>').attr($.extend(g(this) {
type: 'text'
}
))
}
q.removeAttr('name').data( {
'placeholder-password':true, 'placeholder-id':o
}
).bind('focus.placeholder', b); p.data( {
'placeholder-textinput':q, 'placeholder-id':o
}
).before(q)
}
p=p.removeAttr('id').hide().prev().attr('id', o).show()
}
p.addClass('placeholder');
p[0].value=p.attr('placeholder')
}
else {
p.removeClass('placeholder')
}
}
}
(this, document, jQuery));
</script>
<script> $('input').placeholder();
</script>
</body>
</html>
转自这里 http://zach.lysobey.com/files/placeholder/index.html
placeholder IE兼容，显示password的更多相关文章
- placeholder不兼容 IE10 以下版本的解决方法
对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...
- js解决IE8、9下placeholder的兼容问题
由于placeholder是html5的新属性,在IE8.IE9下是不能显示的,有兼容性问题. 解决思路: 1.判断目前浏览器是否支持placeholder属性 2.若不支持,则将type=" ...
- 兼容IE8 input的placeholder的文字显示
if( !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholde ...
- placeholder的兼容处理(jQuery下)
这是一个老问题,结合前辈们的经验,需要处理的问题有一下几个. 1.只有输入框(input/textarea)下的palaceholder属性存在的时候才需要处理这类兼容 2.处理好输入框上焦点和是焦点 ...
- HTML5表单提示placeholder属性兼容IE
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- placeholder属性兼容ie8
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- html5 placeholder属性兼容ie11
placeholder 属性是html5的属性,用于提供描述输入字段预期值的提示信息(hint). 简单例子: <!DOCTYPE HTML> <html> <body& ...
- 解决IE中placeholder的兼容问题
定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 &l ...
- IE9 placeholder 不兼容的解决
坑爹的IE9-,真的是够够的了,不过公司不要求兼容这个玩意了,自己觉得兼容这个鬼还是挺有挑战性的,自己也碰到不少难题,一个个解决. css: .placeholderColor { color : # ...
随机推荐
- swagger请求参数在header中添加token
网友大部分说的是如下配置 参照配置然而没有作用 注掉改红框内的配置,在方法上加如下注释就可以用 @ApiImplicitParams({ @ApiImplicitParam(paramType = & ...
- pom.xml文件配置maven仓库地址
中央仓库就是Maven的一个默认的远程仓库,Maven的安装文件中自带了中央仓库的配置($M2_HOME/lib/maven-model-builder.jar) 在很多情况下,默认的中央仓库无法满足 ...
- 2019-7-2-asp-dotnet-core-通过图片统计-csdn-用户访问
title author date CreateTime categories asp dotnet core 通过图片统计 csdn 用户访问 lindexi 2019-7-2 19:21:2 +0 ...
- thml粘连布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- localStorage,sessionStorage,cookie区别
localStorage:HTML5新增的在浏览器端存储数据的方法.设置和获取localStorage的方法: 设置: localStorage.name = 'zjj'; 获取: localStor ...
- 出错提示：“Could not flush the DNS Resolver Cache: 执行期间，函数出了问题”的解决方法
在DNS解析中,出错提示:"Could not flush the DNS Resolver Cache: 执行期间,函数出了问题"的解决方法 . 由于公司网站空间更换了服务商. ...
- C++ const修饰不同类型的用法
const取自constant的缩写,本意是不变的,不易改变的意思 一.修饰普通变量 const int a = 7; int b = a; //正确 a = 8; ...
- JavaScript事件(随笔)
1. Javascript事件介绍 JavaScript中的事件和现实生活中的事件类似,现实生活中发生的一些事情,例如:交通事件,当这些事情发生时,我们需要提供处理方案: 在JavaScript中事件 ...
- PAT甲级——A1087 All Roads Lead to Rome【30】
Indeed there are many different tourist routes from our city to Rome. You are supposed to find your ...
- gatekeeper学习概述
1.概述 该产品部署在网络隔离装置两端,以代理程序的身份,完成两侧设备连接维护,数据转发的功能.场景简化如图所示: 软件核心是一个基于Netty的网络应用程序,考虑到系统的可维可测性,集成了web化的 ...