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. CentOS6.5下安装mfs分布式存储(转)

    MFS文件系统的组成 1.  元数据服务器.在整个体系中负责管理管理文件系统,目前MFS只支持一个元数据服务器master,这是一个单点故障,需要一个性能稳定的服务器来充当.希望今后MFS能支持多个m ...

  2. 201521123038 《Java程序设计》 第二周学习总结

    201521123038 <Java程序设计> 第二周学习总结 1.本章学习总结 学会在Java程序中使用函数,使程序层次更清晰 使用StringBuilder编写代码,减少内存空间的占用 ...

  3. 201521123085 《java程序设计》 第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前 ...

  4. delphi cxrid设置column靠左显示

    1.双击cxgrid控件,选中要设置的column 2.找到properties,将column设置为Textedit,点击左边的加号 3.点击ALignment->Horz选中taleftJu ...

  5. SQL知识点大纲图

    这是我整理出来的SQL大纲图.

  6. SQLite中Cursor类的说明

    在Android 查询数据是通过Cursor 类来实现的.当我们使用 SQLiteDatabase.query()方法时,就会得到Cursor对象, Cursor所指向的就是每一条数据. Cursor ...

  7. ExtJS4为form表单必填项添加红色*标识

    通常情况下,ExtJS4的form表单必填项在输入状态下会有特殊提示,非输入状态下,显示却和其他项没有任何区别.为使必填项更加容易区分,我们需要根据allowBlank的属性值,为form表单中的必填 ...

  8. 【 js 基础 】关于this

    this 关键字是 Javascript 中很特别的一个关键字,被自动定义在所有函数的作用域中.this提供了一种更优雅的方式隐式"传递"一个对象的引用.今天就来说说 this 的 ...

  9. 【转】开源中国上看到的一个vim的自动配置的好东西，分享下

    https://www.oschina.net/p/onekey-to-vim-ide 变量有高亮,竖行上有直线定位,对python的支持效果更佳,从事C/C++开发的程序员使用也不错.

  10. 【京东详情页】——原生js爬坑之标签页

    一.引言 要做详情页的商品评价等5个li的标签页转换,效果如下: 二.实现原理 有一个特别的地方:上面五个li,但下面只有四个容器(table/div). 设计的目的:无论点哪个li,只有前四个div ...