ie8中支持 password 的 placeholder
之前写过一篇 ie8中使用placeholder 的博客,但是,该文中的 placeholder 在 type="password" 时会出现问题,不能显示文字而是密码类型的点,所以又找了以下的这段代码,可以解决密码的问题,使用方法和之前介绍的一样,只需在 </body> 之前引用该 js 文件即可。
(function () {
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getCharCode: function (event) {
if (typeof event.charCode === "number") {
return event.charCode;
} else {
return event.keyCode;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
}
};
EventUtil.addHandler(document, 'readystatechange', function () {
if (!('placeholder' in document.createElement('input'))) {
var inputdoc = document.getElementsByTagName('input');
var hasPlaceholder = new Array();
for (var i in inputdoc) {
if (typeof (inputdoc[i]) === 'object' && inputdoc[i].getAttribute('placeholder') != null) {
hasPlaceholder.push(inputdoc[i]);
}
}
if (hasPlaceholder.length > 0) {
var holders = new Array;
for (var i = 0; i < hasPlaceholder.length; i++) {
var span = document.createElement('span');
// span.className = 'ui-placeholder';
var input = hasPlaceholder[i];
span.height = input.height;
span.width = input.width;
span.innerHTML = input.getAttribute('placeholder');
if (input === input.parentNode.lastChild) {
input.parentNode.appendChild(span);
} else {
input.parentNode.insertBefore(span, input.nextSibling);
}
span.style.color = "#999";
span.style.textIndent = '0.5em';
span.style.position = "absolute";
span.style.top = input.offsetTop + "6px";
span.style.left = input.offsetLeft;
holders[i] = span;
}
var togglePlaceholder = function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
// alert(target.value)
for (var i in hasPlaceholder) {
if (target === hasPlaceholder[i]) {
if (hasPlaceholder[i].value != '') {
holders[i].style.display = 'none';
} else if (/[a-zA-Z0-9`~!@#\$%\^&\*\(\)_+-=\[\]\{\};:'"\|\\,.\/\?<>]/.test(String.fromCharCode(EventUtil.getCharCode(event)))) { holders[i].style.display = 'none';
} else {
holders[i].style.display = 'block';
}
}
}
} EventUtil.addHandler(document, 'keydown', togglePlaceholder) EventUtil.addHandler(document, 'keyup', function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
// alert(target.value)
for (var i in hasPlaceholder) {
if (target === hasPlaceholder[i]) {
if (hasPlaceholder[i].value != '') {
holders[i].style.display = 'none';
} else {
holders[i].style.display = 'block';
}
}
}
})
}
}
})
}).call()
原文在 ie的placeholder支持。
ie8中支持 password 的 placeholder的更多相关文章
- ie8中使用placeholder
placeholder 是 html5 中的新属性,考虑到还有不少 ie8 的用户,所以找了一个 ie8 的 placeholder 的补丁,如下: <script type="tex ...
- placeholder在IE8中兼容性问题解决
placeholder是HTML5中的一个属性,可以在文本框中设置placeholder属性来显示一些提示性的文字,但对IE10以下的浏览器不支持,下面方法可以让placeholder能够使用在IE1 ...
- IE8 不支持html5 placeholder的解决方案
IE8不支持html5 placeholder的解决方法. /** * jQuery EnPlaceholder plug * version 1.0 2014.07.01戈志刚 * by Frans ...
- DTCMS中部分IE8不支持webupload上传附件的控件,更改为ajaxfileupload
dialog\dialog_attach.aspx <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- 解决IE6/IE7/IE8不支持before,after问题
对从事web开发的朋友来讲,低版本的IE永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片 ...
- ie8中遇到的兼容问题以及解决方案
一.CSS3 1.可以通过在css中引入pie.htc,处理兼容问题(可处理的属性) -webkit-box-shadow: 0 1px 5px #ff2826; -webkit-border-rad ...
- CSS 在IE6, IE7 和IE8中的差别////////////////z
CSS 在IE6, IE7 和IE8中的差别 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存.截至本文,Internet Explorer各个版本总共占据了 ...
- 如何让低版本的IE浏览器(IE6/IE7/IE8)支持HTML5 header等新标签
html5提供的一些新标签(article,aside,dialog,footer,header,section,footer,nav,figure,menu)使用起来非常的方便,但是低版本的IE浏览 ...
- border-raduis 在IE8中的兼容性问题
border-raduis 是css3新增加的属性,我们运用起来也很方便,效果很好,但是在IE8以及之前的ie版本并不支持这个属性,怎么解决这个问题呢? 1.切成背景 这也是我经常用到的方法,虽然说有 ...
随机推荐
- iOS开发——高级UI—OC篇&退出键盘
退出键盘 iOS开发中键盘的退出方法用很多中我们应该在合适的地方使用合适的方法才能更好的提高开发的效率和应用的性能 下面给大家介绍几种最常用的键盘退出方法,基本上iOS开发中的键盘退出方法都是这几种中 ...
- MyReport:DataGrid的打印和打印预览
本文说明怎样使用MyReport来实现Flex DataGrid组件的自己主动化打印预览和打印功能. 实现代码 <? xmlversion="1.0" encoding=&q ...
- jQuery的如何捕捉回车键,改变事件标签
我希望有一个jQuery的解决方案,我必须接近,有什么需要做的? $('html').bind('keypress', function(e) { if(e.keyCode == 13) { retu ...
- Comparing Your Heros拓扑序列的数量
给出N行英雄的比较,每一行包含两个英雄的名字,代表第一个英雄比第二个英雄更受欢迎. 英雄的数目不超过16个.问有多少种可能的受欢迎程度的序列满足N行英雄的比较. 由于只有英雄数目不超过16个,可以用二 ...
- A+B Coming
Problem Description Many classmates said to me that A+B is must needs.If you can’t AC this problem, ...
- DataGridView显示行号的几种方法来自http://www.soaspx.com/dotnet/csharp/csharp_20100204_2740.html
方法一: 网上最常见的做法是用DataGridView的RowPostPaint事件在RowHeaderCell中绘制行号: private void dataGridView1_RowPostPai ...
- Spring-boot & spring.security
spring.security提供了一种身份认证框架,开发者可以在这个框架中实现各种方式的用户身份管理,比如:LDAP.MYSQL.OAUTH.Mongo等等. spring.security认证步骤 ...
- 10个实用的但偏执的Java编程技术
在沉浸于编码一段时间以后,你会渐渐对这些东西习以为常.因为,你知道的-- 任何事情有可能出错,没错,的确如此. 这就是为什么我们要采用"防御性编程",即一些偏执习惯的原因.下面是我 ...
- Shell学习笔记 - 环境变量配置文件
一.source命令 功能:在当前bash环境下读取并执行配置文件中的命令 1. 命令格式 source 配置文件 或 . 配置文件 2. 命令示例 [root@localhost ~]# sou ...
- jQuery源码dom ready分析
一.前言 在平时开发web项目时,我们使用jquery框架时,可能经常这样来使用$(document).ready(fn),$(function(){}),这样使用的原因是在浏览器把DOM树渲染好之前 ...