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的更多相关文章

  1. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  2. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  3. 如何让低版本IE浏览器支持HTML5标签并为其设置样式

    现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...

  4. 不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什 ...

  5. html5.js 让所有IE支持HTML5

    摘自: http://hi.baidu.com/skway/item/33f38a9487356b4ff14215cf?qq-pf-to=pcqq.c2c html5.js 让所有IE支持HTML5 ...

  6. 如何让旧浏览器支持HTML5新标签

    HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...

  7. 让旧浏览器支持HTML5新增标签

    首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.   ...

  8. html5shiv.js-让IE浏览器支持HTML5标准

    兼容性IE8及以下IE版本 浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题. <!–[if IE]> ...

  9. 低版本浏览器支持HTML5标签的方法

    最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...

随机推荐

  1. 201521123083《Java程序设计》第8周学习总结

    1. 本周学习总结 这周因为一些事情耽搁了,几乎没什么打java代码,这几天尽量补过来 2. 书面作业 1.List中指定元素的删除 1.1 实验总结 不贴大段代码了,简要总结一下.切割成数组,主要用 ...

  2. 201521123051《java程序设计》 第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 使用工具:XMind 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.ja ...

  3. php中获取当前系统时间、时间戳

    今天写下otime($time, $now)为将时间格式转为时间戳,$time为必填.清楚了这个,想了解更多,请继续往下看. 3. date($format)用法比如:echo date(‘Y-m-d ...

  4. 手写Maven的archetype项目脚手架

    一.背景 maven是一个很好的代码构建工具,采用“约定优先于配置”的原则进行项目管理,相信很多的java开发者应该都了解maven并可能在工作当中都是通过maven来管理项目的,在创建的项目的时候, ...

  5. Spring - 运行时获取bean（ApplicationContextAware接口）

    默认情况下,我们的bean都是单例模式(即从容器初始化到销毁只保持一个实例).当一个bean需要引用另外一个bean,我们往往会通过bean属性的方式通过依赖注入来引用另外一个bean.那么问题就来了 ...

  6. Spring - Bean的概念及其基础配置

    概述 bean说白了就是一个普通的java类的实例,我们在bean中写一些我们的业务逻辑,这些实例由Sping IoC容器管理着.在web工程中的spring配置文件中,我们用<bean/> ...

  7. birt-j脚本调试 & 动态sql的实现

    一个比较好的birt问题解决网址: http://www.myexception.cn/h/1335919.html 1,Birt的JavaScript脚本简单调试 Birt中的js脚本不能用aler ...

  8. 去掉 Warning:$HADOOP_HOME is deprecated

    修改配置文件/etc/profile,增加环境变量HADOOP_HOME_WARN_SUPPRESS=1, 保存退出,再次启动hadoop,就不会出现警告信息了

  9. Java中的类型转换(Integer、Long、String)

    这段时间将项目中一个模块参照C++源代码,实现一个JAVA版.主要功能是将一些字段信息转换为String类型,传输后可以进行解析. Integer.Long转为String,Java本身提供了这种转换 ...

  10. shell脚本获取文件中key/value的小方法

    方法有N种,awk.sad.grep.cut... 以上几种方式不写了,就写两个不太常用到的. 废话少说,直接上代码: cat a.txt aa.gif=aaaa.gif bb.gif=bbbb.gi ...