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 : # ...
随机推荐
- spring：bean的细节之三种创建Bean对象的方式
<!--创建Bean的三种方式--><!--第一种方式,使用默认构造函数创建 在spring的配置文件中使用bean标签,配以id和class属性之后,且没有属性和标签时. 采用的就 ...
- h5对接jssdk支付分并调用开启支付分页面
1.ws.config签名 调用ticket等获取ws.config的签名,下面会调用方法再调用方法时需要再次按照调用方法的签名 wx.config({ debug: true, // 开启调试模 ...
- python 简单的图片比较
# by movie on 2019/12/18 from PIL import Image from PIL import ImageChops path1 = 'images/trumpA689. ...
- thinkPHP 字段映射功能
thinkPHP的字段映射功能可以让你在表单中隐藏真正的数据表字段,而不用担心放弃自动创建表单对象的功能,假设我们的User表里面有username和email字段,我们需要映射成另外的字段,定义方式 ...
- BZOJ2594:水管局长数据加强版
Description SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可能要将一定量的水从x处送往y处,嘟嘟需要为供水公司找到一 ...
- window 批量修改或去除文件后缀名
for /r %i in (*.!ut) do ren "%i" *. 转自:https://blog.csdn.net/zhang_ruisen/article/details/ ...
- EF 中获取 TableAttribute的值，即数据库中真实的表名
比如EF中我定义了这样一个实体: [Table(Name = "MyTableName")] public class MyClass { } [Table(Name = &quo ...
- Hibernate（五）之一对多&多对一映射关系
既然我们讲到了一对多和多对一关系,必然要提到多表设计的问题.在开发中,前期需要进行需求分析,希求分析提供E-R图,根据ER图编写表结构. 我们知道表之间关系存在三种: 一对多&多对一:1表(主 ...
- VS 断点不会命中的情况
总结下遇到的几次断点无法命中的情况: 1.手误设置为release模式 如果是release模式的情况下,断点跳转命中情况是无法预知的,所以请修改成debug 2.与源文件不一致 这个情况是最常见的, ...
- Python学习day09 - Python进阶（3）
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...