模拟placeholder支持ie8以下处理了密码框只读的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="form1" action="">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="password" name="password2" placeholder="请确认密码">
<input type="text" name="email" placeholder="请输入邮箱">
</form> <script type="text/javascript">
(function(){
//检测是否支持placeholder
if('placeholder' in document.createElement('input')) return; var form = document.getElementById('form1'),
inputs = form.getElementsByTagName('input'),
i,input,value,type; //获取焦点事件
var focus = function(value,type){
return function(){
if(this.value === value) this.value = '';
if(this.value === '' && type === 'password'){
try {
this.type = 'password';
}catch(e){
this.style.visibility = 'hidden';
this.style.position = 'absolute';
this.nextSibling.style.visibility = 'visible';
this.nextSibling.style.position = 'relative';
//定位光标
this.nextSibling.focus();
}
}
};
}; //失去焦点事件
var blur = function(value,type){
return function(){
if(this.value === '') this.value = value;
if(this.value === value && type === 'password'){
try{
this.type = 'text';
}catch(e){
this.style.visibility = 'hidden';
this.style.position = 'absolute';
this.previousSibling.style.visibility = 'visible';
this.previousSibling.style.position = 'relative';
}
}
};
}; //如果浏览器是ie8以下,则创建一个文本框与密码框切换显示
var createInput = function(value,type,type2){
var tmp = document.createElement('input');
tmp.type = type;
tmp.name = this.name;
tmp.placeholder = value;
tmp.value = value;
tmp.onfocus = focus(value,type2);
tmp.onblur = blur(value,type2);
form.insertBefore(tmp,this);
this.style.visibility = 'hidden';
this.style.position = 'absolute';
} for(i=0;i<inputs.length;i++){
input = inputs[i]; //不是文本框跳过
if(input.type !== 'text' && input.type !== 'password') continue; type = 'text';
value = input.getAttribute('placeholder'); if(input.type === 'password'){ type = 'password'; //给密码框做一个标记 //ie8以下input type是只读的
try {
input.type = 'text';
}catch(e){
createInput.call(input,value,'text',type);
i++;
}
} input.value = value;
input.onfocus = focus(value,type);
input.onblur = blur(value,type);
}
})();
</script>
</body>
</html>
模拟placeholder支持ie8以下处理了密码框只读的问题的更多相关文章
- 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果
placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...
- IE下支持文本框和密码框placeholder效果的JQuery插件
基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示 ...
- jQuery效果之封装模拟placeholder效果,让低版本浏览器也支持
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...
- 关于input标签和placeholder在IE8,9下的兼容问题
一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...
- jquery异步上传文件,支持IE8
http://code.taobao.org/p/upload2/src/ 已经托管至淘宝code 源码:http://code.taobao.org/p/upload2/src/jquery.upl ...
- placeholder兼容IE8解决方案
1.原因:placeholder是h5的新属性,IE10以前的浏览器(8.9)不支持此属性. 2.解决方法:jQuery三方插件 jquery-placeholder 3.快速开始: <! ...
- bootstarp3 支持ie8
http://blog.csdn.net/hyb3280660/article/details/51850832 想要bootstarp3 支持ie8? 引入 <!-- 存放全局css/js - ...
- 获取表单的初始值,模拟placeholder属性
input和textarea有一个默认属性defaultValue,即初始值. 即使在页面操作修改了input和textarea的内容,获取到的defaultValue依然是初始值.可通过该值模拟pl ...
- Bootstrap 3 支持 IE8
Bootstrap 3 支持 IE8 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries ...
随机推荐
- GCD同步异步 串行并行大解析
/** 核心概念 任务:block里需要执行的操作 队列:把任务添加进入队列中,按照先进先出的原则来执行任务 串行队列:一个一个的执行 并行队列:可以让多个任务并发(同时)执行(自动开启多个线程同时 ...
- 关于Storyboard的使用
前言:说起来码龄很久似的,但是还是有很多基础的知识都不知道,比如下面介绍的关于Stroyboard的使用.(本篇博文随笔会不断补充关于Storyboard的使用技巧,持续更新) 目录: 1.使用Str ...
- net2.0对于递归变量的处理方式不同引发的递归问题
同样的代码,用NET2.0执行产生的效果与其它框架使用的不同,导致报错. 认真查找原因后发现该程序的编写人员隐式的使用了一个公共变量,使之在递归过程中不断的被改写,使得1次递归后就破坏了原来的循环体, ...
- symfony2 twig模板引擎
1.基本语法 Says something:{{ }} Does something:{% %} Comment something:{# #} {% extends "App ...
- nodejs API
1.querystring参数处理 序列化 > querystring.stringify({'name':'scott',course:['jade','node'],from:''}) 'n ...
- pentaho cde 选择性的显示多列数据
在业务需求中,有时候会有这种需要,就是查出来可多列数据,而我只想画出来其中的一列或者说某一列,而pentaho会默认画出查出来的所有数据,而不断的更改数据源又太麻烦,这时就要用到resders方法了. ...
- Javascript之旅——第十站:为什么都说闭包难理解呢?
研究过js的朋友大多会说,理解了js的原型和闭包就可以了,然后又说这些都是js的高级内容,然后就又扯到了各种神马的作用域...然后不少 人就会被忽悠的云里雾里...下面我也试着来说说闭包,看我说的这个 ...
- Kafka三款监控工具比较(转)
在之前的博客中,介绍了Kafka Web Console这 个监控工具,在生产环境中使用,运行一段时间后,发现该工具会和Kafka生产者.消费者.ZooKeeper建立大量连接,从而导致网络阻塞.并且 ...
- js 添加节点dom
var elemet = document.createElement("p"); var attr=document.createAttribute("align&qu ...
- Linux文件I/O
文件描述符(File Descriptor) a small, nonnegative integer for use in subsequent system calls (read(2), wri ...