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. (3)ES6解构赋值-对象篇

    对象的解构赋值(可以不按顺序,但是key必须一样否则为undefined) //demo1 var {name,age} = { name: "Jewave", age:26 }; ...

  2. MySQL中char与varchar区别，varchar最大长度是多少？

    一.首先来说下字符与字节的区别: 字符与字节它们完全不是一个位面的概念,所以两者之间没有"区别"这一说法.在不同编码里,字符和字节的对应关系是不同的.一般来说,半角英文状态下一个字 ...

  3. JUnit之TestCase和TestSuite详解

    首先介绍下TestCase以及TestSuite.    TestCase:字面意思,测试用例.为一个或多个方法提供测试方法.一般是一个test    TestSuite:测试集合,即一组测试.一个t ...

  4. 第二次项目冲刺（Beta阶段）--第二天

    一.站立式会议照片 二.项目燃尽图 三.项目进展 功能模块的代码编写完成,界面布局规划已经定型,不会有大的修改,接下去就是主要解决存在的bug以及各种测试. 队员  ID 贡献比 王若凡 201421 ...

  5. 201521123056 《Java程序设计》第14周学习总结

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) 参 ...

  6. Jar文件 META-INF/MANIFEST.MF文件详解

    打开Java的JAR文件我们经常可以看到文件中包含着一个META-INF目录, 这个目录下会有一些文件,其中必有一个MANIFEST.MF,这个文件描述了该Jar文件的很多信息,下面将详细介绍MANI ...

  7. CSS3 3D环境实现立体 魔方效果代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】

    什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...

  9. MultipleOutputs新旧api

    package MRNB_V4; import java.io.IOException; import java.util.Iterator; import org.apache.hadoop.con ...

  10. PHP中foreach循环传值问题

    首先看一段代码: <?php $a=array('ab','cd','ef'); $count=3; foreach($a as $key=>$value){ $value='abcdef ...