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. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  2. 201521123089 《Java程序设计》第3周学习总结

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...

  3. 201521123071 《JAVA程序设计》第十周学习总结

    第十周-异常与多线程 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业:本次PTA作业题集异常.多线程 1. finally:题目4-2 1. ...

  4. 201521123110《Java程序设计》第10周学习总结

    1. 本周学习总结 2. 书面作业 1.finally 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? finally块中的代码在正常情况下一定会执行,所 ...

  5. Python-老男孩-03_socket

    Socket简介: 所谓Socket也称"套接字",用于描述IP和端口,是一个通信链的句柄,应用程序通过"套接字"向网络发出请求或应答网络请求. Socket起 ...

  6. Python shelve模块的使用方法

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = '人生入戏' import shelve,time #写 x = shelve. ...

  7. 嵌入系统squashfs挂载常见问题总结

    由于squahsfs的一些优点,嵌入系统常常直接使用squashfs作为initrd挂载到/dev/ram,作为rootfs.这里对常见的一些问题进行一些分析. 1. kernel启动出现错误 RAM ...

  8. Promise小书（长文）

    promise基础 Promise是异步编程的一种解决方案.ES6 Promise的规范来源于Promises/A+社区,它有很多版本的实现. Promise比传统的解决方案(回调函数和事件)更合理和 ...

  9. 百度编辑器不能插入html标签解决方法

    找到此方法: me.addInputRule(function (root) { var allowDivTransToP = this.options.allowDivTransToP; var v ...

  10. Spring 使用AspectJ的三种方式

    Spring 使用AspectJ 的三种方式 一,使用JavaConfig 二,使用注解隐式配置 三,使用XML 配置 背景知识: 注意 使用AspectJ 的 时候 要导入相应的Jar 包 嗯 昨天 ...