兼容ie7以上的 placeholder属性
最近项目踩过的坑,不考虑ie的可以拐弯绕路走了。
css3的新属性 占位符 placeholder用着多舒服 。
偏偏万恶的ie不支持,网上有几种方法是用焦点事件代替的,不过会失去原有的特性。一旦获取焦点或者失去焦点占位符的文字就会消失。
而placeholder是在输入文字时占位符的文字才会消失
强调一点,此方法只针对 input[type='text'],其他的不支持,比如passwrod
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://s28.9956.cn/static/v3_1/js/jquery.min.js"></script>
</head>
<body>
<input type="" class="clo1" placeholder="电话">
<script type="text/javascript">//'代码保存成一个js文件引用即可。
$(document).ready(function() {
var doc = document,
inputs = doc.getElementsByTagName('input'),
supportPlaceholder = 'placeholder' in doc.createElement('input'), placeholder = function(input) {
var text = input.getAttribute('placeholder'),
defaultValue = input.defaultValue;
if (defaultValue == '') {
input.value = text
}
input.onfocus = function() {
if (input.value === text) {
this.value = ''
}
};
input.onblur = function() {
if (input.value === '') {
this.value = text
}
}
}; if (!supportPlaceholder) {
for (var i = 0,
len = inputs.length; i < len; i++) {
var input = inputs[i],
text = input.getAttribute('placeholder');
if (input.type === 'text' && text) {
placeholder(input)
}
}
}
});
</script>
</body>
</html>
再列举一个支持passwrod的方法,比较猥琐,用一个label标签把input包起来,里面在加一个标签代替placeholder的文字
先做个样式,定位起来
<style type="text/css">
label{position: relative;}
label p{position: absolute;left: 5px;top:0px;margin:;padding:;}
</style>
<label>
<input onfocus="$(this).siblings('p').hide();" onblur="if($(this).val()==''){$(this).siblings('p').show();}" type="password" class="psw">
<p style="display: block;">请输入密码</p>
</label>
上面用的js方法写的,写到标签里的,大家喜欢jquery的写法的话,请看下面代码
<script type="text/javascript">
$(".psw").focus(function(){
$("p").hide();
});
$(".psw").blur(function(){
$("p").show();
});
</script>
兼容ie7以上的 placeholder属性的更多相关文章
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...
- IE如何兼容placeholder属性
在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢? 网上搜索了一下,其实也挺简单的,可以采用以下 ...
- input 的 placeholder属性在IE8下的兼容处理
placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...
- HTML5表单提示placeholder属性兼容IE
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)
placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...
- placeholder属性兼容ie8
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 兼容ie10以下版本的placeholder属性
<script src="${ctx }/js/jquery.placeholder.js" type="text/javascript">< ...
- Html5的placeholder属性(IE兼容)
HTML5对Web Form做了很多增强,比方input新增的type类型.Form Validation等. Placeholder是HTML5新增的还有一个属性,当input或者textarea设 ...
- html5 placeholder属性兼容ie11
placeholder 属性是html5的属性,用于提供描述输入字段预期值的提示信息(hint). 简单例子: <!DOCTYPE HTML> <html> <body& ...
随机推荐
- C# 多线程复习笔记
编码的日子其实也有一段时间了,但是,作为一个客户端程序,因为自己是做游戏开发的,一直没有对线程这个概念比较模糊吧. 记录下线程的整理学习路线.原文:http://www.cnblogs.com/min ...
- API函数详解:API大全总目录(按字母排列)
API函数详解 http://www.feiesoft.com/api/api.html
- 使用jdbc存储图片和大文本
package cn.itcast.i_batch; import java.sql.Connection; import java.sql.PreparedStatement; import jav ...
- sap中Excel的模版上传和下载
一:事物码smw0 二:上传步骤 注:"包"为项目的包的名称. 三:下载代码 l_filename = 'XX.xls'. l_muban = 'z123'. *&---下 ...
- ABP官方文档翻译 9.1 EntityFramework集成
EntityFramework集成 Nuget包 DbContext 仓储 默认仓储 自定义仓储 应用特定的基础仓储类 自定义仓储示例 仓储最佳实践 事务管理 数据存储 ABP可以使用ORM框架,它内 ...
- [Miller-Rabin & Pollard-rho]【学习笔记】
Miller-Rabin & Pollard-rho 很久之前就学过了...今天重学一遍 利用费马小定理,但不能判断伪素数的情况 基于a的伪素数n: \(a^{n-1} \equiv 1 \p ...
- HDU1005 找规律 or 循环点 or 矩阵快速幂
http://acm.hdu.edu.cn/showproblem.php?pid=1005 1.一开始就注意到了n的数据范围 <=100 000 000,但是还是用普通的循环做的,自然TLE了 ...
- pip install 提示"no previously-included directories found matching"及"no previously-included files matching found anywhere in distribution",且偶发无法关联安装 PyPI 库的故障
环境描述: Python 2.7.5 CentOS-7.2 报错现象: (1).在虚拟环境下运行 pip install 命令安装 PyPI 第三方库,出现类似如下告警. Running setu ...
- yii2 模块的创建及使用
yii2 模型创建可以通过gii工具创建,方便快速yii2 可以在项目的根目录创建一个modules文件夹存放各个模块,当然,每个模块里还可以再创建模块 一.直接在项目根目录创建一个模块 看截图--& ...
- IDEA Default模式下的常用快捷键
功 能 快 捷 键 备 注 Back Up Ctr + Alt + Left Forword Ctr + Alt + Right Previous Tab Alt + Left Next Tab Al ...