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 : # ...
随机推荐
- VS2010版的Speex音频处理模块(附源码+测试demo)
开源的Speex代码内部包含了VS2003,05,08工程,但是直接编译总有一些要设置的地方,虽说也不是很复杂,但是对于不是很了解VS的同学来说还是要折腾一阵,所以我弄了一个可以直接使用的版本,当然是 ...
- 阿里巴巴飞天大数据架构体系与Hadoop生态系统
很多人问阿里的飞天大数据平台.云梯2.MaxCompute.实时计算到底是什么,和自建Hadoop平台有什么区别. 先说Hadoop 什么是Hadoop? Hadoop是一个开源.高可靠.可扩展的分布 ...
- thinkphp 数据写入
直线电机优势 ThinkPHP的数据写入操作使用add方法,使用示例如下: $User = M("User"); // 实例化User对象 $data['name'] = 'Thi ...
- cache方法用于查询缓存操作，也是连贯操作方法之一。
cache方法用于查询缓存操作,也是连贯操作方法之一. cache可以用于select.find和getField方法,以及其衍生方法,使用cache方法后,在缓存有效期之内不会再次进行数据库查询操作 ...
- MFC 使程序不在任务栏显示
在OnInitDialog()中直接修改窗口风格: // 让本程序不在任务栏显示(创建一个工具条窗口) ModifyStyleEx(WS_EX_APPWINDOW,WS_EX_TOOLWINDOW);
- HTTP的九种请求方法
HTTP1.0定义了三种请求方法:GET.POST.HEAD HTTP1.1定义了六种请求方法:PUT.DELETE.PATCH.OPTIONS.CONNECT.TRACE 1.get 请求指定页面的 ...
- iOS之CAEmitterLayer粒子引擎
1.CAEmitterCell粒子发射器的相关属性: /* CoreAnimation - CAEmitterLayer.h Copyright (c) 2007-2017, Apple Inc. A ...
- Freemaker 开发学习笔记
Freemaker 是一个强大的模板引擎,相比 velocity 而言,其强大的过程调用.递归和闭包回调功能让 freemaker 可以完成几乎所有我们所想的功能.从个人看法而言,freemaker ...
- 按钮事件v-on
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- PAT甲级——A1099 Build A Binary Search Tree
A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...