【学习】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.传统引 ...
随机推荐
- 201521123070 《JAVA程序设计》第4周学习总结
1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. http://naotu.baidu.com/file/4de6f42e4f4f6cce0531dd9997b04e60?token ...
- 201521123063 java第一周总结
20152112306 <Java程序设计>第一周学习总结 1.本周学习总结(2.20-2.26) java语言的特点: (1)简约且简单 (2)平台无关性 (3)面向对象 (4)多线程. ...
- 201521123024 《Java程序设计》第1周学习总结
一．本周章学习总结 1.Java的版本迁移 2.运用eclipse和notepad++编写Java 3.对JDK,JRE,JVM有初步的了解 二．书面作业 1.为什么java程序可以跨平台运行?执行j ...
- Java 第十一周总结
1. 本周学习总结 2. 书面作业 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么办法实现互斥同步访 ...
- 在控制台显示“Hello World”
//作者:江骆 //功能:在控制台显示"Hello World" //日期:2017.7.19 public class helloworld //public 表示公共类,一 ...
- 详解go语言的array和slice 【一】
本篇会详细讲解go语言中的array和slice,和平时开发中使用他样时需要注意的地方,以免入坑. Go语言中array是一组定长的同类型数据集合,并且是连续分配内存空间的. 声明一个数组 var a ...
- 商城项目整理（四）JDBC+富文本编辑器实现商品增加，样式设置，和修改
UEditor富文本编辑器:http://ueditor.baidu.com/website/ 相应页面展示: 商品添加: 商品修改: 前台商品展示: 商品表建表语句: create table TE ...
- 支付宝支付php的demo或sdk报错 Warning: openssl_sign() [function.openssl-sign]: Unknown signature algorithm. in
最近在做支付宝支付,在本地测试一切正常,上传到服务器就遇到报错: Warning: openssl_sign() [function.openssl-sign]: Unknown signature ...
- MVC查询数据接收及校验
本来想写一篇aspx的TreeView控件绑值的文章的,在写案例的时候,写了一半,发现有些地方还得考虑以下,就留待下次了. 这一篇的话,是最近在开发一个项目的时候,有大量的页面和数据表,需要花式查询, ...
- Docker入门之三容器
上一篇博客学习了下镜像,今天来学习容器.容器类似一个手机中的沙盒环境,用来运行app实例.和镜像一样也是对容器的创建.删除.导出等. 由于我买的参考书中的例子好多都是基于linux的,所以我将dock ...