兼容placeholder
众所周知。IE9以下不兼容placeholder属性,因此自己定义了一个jQuery插件placeHolder.js。以下为placeHolder.js的代码:
/**
* 该控件兼容IE9下面,专门针对IE9下面不支持placeholder属性所做
* Author: quranjie
* Date:2014-09-26
*/
$(function() {
// 假设不支持placeholder,用jQuery来完毕
if(!isSupportPlaceholder()) {
// 遍历全部input对象, 除了密码框
$('input').not("input[type='password']").each(
function() {
var self = $(this);
var val = self.attr("placeholder");
input(self, val);
}
); /* 对password框的特殊处理
* 1.创建一个text框
* 2.获取焦点和失去焦点的时候切换
*/
$('input[type="password"]').each(
function() {
var pwdField = $(this);
var pwdVal = pwdField.attr('placeholder');
var pwdId = pwdField.attr('id');
// 重命名该input的id为原id后跟1
pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#' + pwdId + '1');
pwdPlaceholder.show();
pwdField.hide(); pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
}); pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
);
}
}); // 推断浏览器是否支持placeholder属性
function isSupportPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
} // jQuery替换placeholder的处理
function input(obj, val) {
var $input = obj;
var val = val;
$input.attr({value:val});
$input.focus(function() {
if ($input.val() == val) {
$(this).attr({value:""});
}
}).blur(function() {
if ($input.val() == "") {
$(this).attr({value:val});
}
});
}
调用方法:
<html>
<head>
<title>替换placeholder属性 兼容IE demo</title>
<style type="text/css">
input {
height: 20px;
width: 150px;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="js/placeHolder.js" ></script> <script type="text/javascript">
function check(){
// 打印出password的值
var passValue = $('#password').val();
alert(passValue);
return false;
};
</script>
</head> <body>
<form action="#">
<input id="username" type="text" placeholder="请输入用户名" />
<input id="password" type="password" placeholder="请输入密码" />
<input id="confirm" type="password" placeholder="请确认密码" />
<br /><br />
<input type="submit" onclick="return check();"/>
</form>
</body>
</html>
本代码兼容IE9下面,jQuery选择1.7.2的稳定版本号,代码实现考虑到一个页面有多个password输入框的情况。
插播广告。本人想在工作之余做些兼职项目挣点外快。项目领域主要为:Android、IOS、PHP以及站点整站建设。当中尤其擅长Android、PHP和站点建设。
有意者请私信给我!非诚勿扰,谢谢!
兼容placeholder的更多相关文章
- 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
- jQuery实现ie浏览器兼容placeholder效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5的placeholder属性(IE如何兼容placeholder属性)
界面UI推荐 jquery html5 实现placeholder兼容password IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...
- IE如何兼容placeholder属性
在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢? 网上搜索了一下,其实也挺简单的,可以采用以下 ...
- IE8兼容placeholder的方案
用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...
- 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)
placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...
- 【JS】IE兼容placeholder
直接上代码: $(document).ready(function () { var doc = document, textareas = doc.getElementsByTagName('tex ...
- ie上如何兼容placeholder
首先,判断浏览器是否支持placeholder属性: var input = document.createElement('input'); if("placeholder" i ...
- ie兼容placeholder效果
转载:http://www.jb51.net/article/56244.htm placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 ...
随机推荐
- 将int型数值拆分成4字节
- POJ 3680 Intervals(费用流)
Intervals Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 5762 Accepted: 2288 Descrip ...
- 嵌入式学习之Nand Flash
转:http://m.blog.csdn.net/blog/woshixiongge/9017149 Nand Flash是flash存储器的一种,其内部采用非线性宏单元模式,为固态大容量内存的实现提 ...
- s3c2440对nandflash的操作
转:http://blog.csdn.net/zhaocj/article/details/5795254 nandflash在对大容量的数据存储中发挥着重要的作用.相对于norflash,它具有一些 ...
- jvm分析内存泄露
首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 Java小组 工具资源 - 导航条 - 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 Java小组 工具资源 ...
- MySql_安装及简单命令
一.下载MySql http://dev.mysql.com/downloads/file/?id=461390 版本位5.7.11.0.msi,32位的,但是该版本在64位机器上也可以使用 二.安装 ...
- 【LaTeX】E喵的LaTeX新手入门教程(2)基础排版
换了块硬盘折腾了好久..联想的驱动真坑爹.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇文档框架嗯昨天我们已经编写了一个最基本的文档,其内容是这样的:\documentclass{ar ...
- web.config及<customErrors>节点之说明
Web.config文件是一个XML文本文件,它用来储存ASP.NETWeb 应用程序的配置信息(如最常用的设置ASP.NETWeb 应用程序的身份验证方式),它可以出现在应用程序的每一个目录中.当你 ...
- POJ 2664 Prerequisites?(简单题)
[题意简述]:k:已经选择的科目数:m:选择的科目类别:c:能够选择的科目数.r:要求最少选择的科目数量 在输入的k和m以下的一行是选择的科目号. 比如: 3 2 //3是他选择了3科.2表示选择了两 ...
- Content Provider
Content Provider:提供了数据的接口,可以共享数据 基本概念:1:为存储和获取数据提供了同一的接口2:可以在不同的应用程序之间共享数据3:Android为常见的一些数据提供了Conten ...