【学习】jquery.placeholder.js让IE浏览器支持html5的placeholder
type为text或password的input，其在实际应用时，往往有一个占位符，类似这样的：
在没有html5前，一般写成value，用js实现交互，文本框获得焦点时，提示文字消失，失去焦点时，文字又出现，这样体验很好，而且也不用在文本框前面放上功能字样的文字了，节省空间。贴一段jquery代码好了：
$(":input").focus(function(){//默认文字消失
if($(this).val()==this.defaultValue){
$(this).val("");
}
}).blur(function(){//默认文字出现
if($(this).val()==""){
$(this).val(this.defaultValue);
}
});
而在html5中，input文本框或textarea文本域有了自己的占位符属性，placeholder，替代了value，也不用写js了，其本身就具备了用户输入内容时，提示文字消失的功能。
我的偶象大神张鑫旭很早就写过一篇文章，详细阐述其特性，原文地址：http://www.zhangxinxu.com/wordpress/?p=2169
但是呀，令人头疼的IE，
看看这一片绿海中的几点红，ie简直就是大魔王，而且呢，ie8不兼容就算了，ie9也不兼容，这怎么能放心的使用呢，使用了也会被领导检出bug的。
还是用回value吧，但是，这么好的属性不用就是不甘心呢，太太可惜了吧。没关系，有问题找度娘啊，搜搜搜，让placeholder能兼容ie的搜索结果不要太多哦。
最后，找到一个最完美的解决办法，而且兼容password。使用了插件jquery-placeholder.js
用法简单，只要引入jquery库文件和插件文件，并添加一行代码调用即可，具体如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-placeholder.js"></script>
<script>jQuery(function($){$.placeholder.ini();})</script>
<style>input{width:500px}</style>
</head>
<body>
<div>
<div>
<span>username:</span>
<span>
<input type="text" placeholder="Put your name here, max length is 16 letters" maxlength="16" />
</span>
</div>
<div>
<span>password:</span>
<span>
<input type="password" placeholder="Your password here" />
</span>
</div>
</div>
</body>
</html>
【学习】jquery.placeholder.js让IE浏览器支持html5的placeholder的更多相关文章
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- 如何让低版本IE浏览器支持HTML5标签并为其设置样式
现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...
- 不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什 ...
- html5.js 让所有IE支持HTML5
摘自: http://hi.baidu.com/skway/item/33f38a9487356b4ff14215cf?qq-pf-to=pcqq.c2c html5.js 让所有IE支持HTML5 ...
- 如何让旧浏览器支持HTML5新标签
HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...
- 让旧浏览器支持HTML5新增标签
首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素. ...
- html5shiv.js-让IE浏览器支持HTML5标准
兼容性IE8及以下IE版本 浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题. <!–[if IE]> ...
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
随机推荐
- Java课程设计——博客作业教学数据分析系统（201521123084 林正晟）
#课程设计--博客作业教学数据分析系统(201521123084 林正晟) 1.团队课程设计博客链接 博客作业教学数据分析系统 2.个人负责模块或任务说明 学生登陆界面的前端实现和与数据库的连接 学生 ...
- 201521123009 《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 Q1:List中指定元素的删除(题目4-1) 1.1 实验总结 Scanne ...
- 201521123039 《java程序设计》第三周学习总结
1.本周学习总结 2.书面作业 (1)代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; pu ...
- 201521123080《Java程序设计》第1周学习总结
#1. 本周学习总结 Java开发环境,如何用记事本和eclipse进行编程. #2. 书面作业 Q1.为什么java程序可以跨平台运行?执行java程序的步骤是什么?(请用自己的语言书写) ...
- 201521123036 《Java程序设计》第13周学习总结
本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 书面作业 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分 ...
- 201521123097《Java程序设计》第九周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...
- 201521123049 《JAVA程序设计》 第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...
- JavaScript的5中基本数据类型
javascript的5种基本数据类型有: Undefined,Null,Bollean,Number,String,1种复杂数据类型:Object. 1Boolean类型 将一个值转换为Bollea ...
- 数据库复用代码【c3p0配置文件、数据库连接池】
前言 为了复用,记载一些以前写过的工具类.方法 c3p0配置文件[c3p0-config.xml] <?xml version="1.0" encoding="UT ...
- [04] Cookie概念和基本使用
1.Cookie是什么 Cookie,中文名称为"小型文本文件"或"小甜饼",指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密). 很多网站 ...