【学习】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.传统引 ...
随机推荐
- c++ Lambda函数学习
或许,Lambda 表达式算得上是 C++ 11 新增特性中最激动人心的一个.这个全新的特性听起来很深奥,但却是很多其他语言早已提供(比如 C#)或者即将提供(比如 Java)的.简而言之,Lambd ...
- 团队作业3——需求改进&系统设计
Deadline: 2017-4-21 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的四个方面 需求&原型改进 系统设计 Alpha任务分配计划 测试计 ...
- GUI(JMenuBar+JMenu+JMenuItem)
public class WindowMenu extends JFrame { JMenuBar menubar; JMenu menu,subMenu; JMenuItem item1,item2 ...
- 201521123035《Java程序设计》第八周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 //泛型方法,打印MyStack的所有元素的薪水,不管MyStack中 ...
- 201521123057 《Java程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...
- 201521123025<<java程序设计>>第4周学习总结
Q1. 本周学习总结 Q2.书面作业 1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在网上 ...
- 201521123093 java 第二周学习总结
201521123093 <java程序设计> 第二周学习总结 一.第二周学习总结 答:(1)关于进一步使用码云管理代码,本周才真正学会了如何将Eclipse里的代码上传到码云中,并且能够 ...
- 201521123053《Java程序设计》第1周学习总结
1. 本周学习总结 第一次接触Java,让我感到很吃力,有些困难.但我知道接触所有新事物都会困难,慢慢来就好. 下面是我这周的学习总结: one 第一节课 老师上课太快了,而且我没预习,根本跟不上 ...
- 使用 Python & Flask 实现 RESTful Web API
环境安装: sudo pip install flask Flask 是一个Python的微服务的框架,基于Werkzeug, 一个 WSGI 类库. Flask 优点: Written in Pyt ...
- linux下修改rm命令防止误删除
前言:相信很多朋友都遇到过在linux下用rm命令误删除文件的时候,此刻的心中仿佛有无数的羊驼在奔腾.那么怎么防止这种情况发生呢?当然是有方法的,我们可以写一个shell脚本,改变一下rm命令的作用. ...