众所周知，HTML5中提供了很多比较实用的新属性，其中最常用就是placeholder属性，这个属性默认在输入框中展示一串浅灰色的提示信息，当用户点击输入时，提示信息消失。但是作为HTML5的新表单属性就面临了低版本浏览器不兼容的问题。
之前看到网上有很多使用JQuery脚本实现placeholder兼容的例子，今天我使用本Modernizr.js加上原生JS中的HTML-DOM中的forms对象实现placeholder兼容低版本浏览器。
首先，简单介绍一下Modernizr，作为一个开源JavaScript库，Modernizr的主要功能就是检测HTML5和CSS3在浏览器中的支持情况。那么如何使用Modernizr呢？方法很简单，首先去Modernizr中文网下载最新版的脚本文件，并且放在HTML文档中的head标签中，如下：
<head lang="en"> <meta charset="UTF-8"> <title>联系我们</title> <link href="style/base.css" rel="stylesheet"> <script src="script/modernizr.min.js"></script> </head>然后在文档中的html标签中添加“no-js”的类名，即可使用Modernizr.js
<html class="no-js">其次，简单说明一下HTML-DOM中的forms对象，该对象可以获取HTML中所有表单元素，于childNodes不同，它只返回表单元素
使用： document.forms返回一个数组，包括这个文档中的所有form元素 document.forms[0].elements返回数组，文档中第一个表单下的所有表单元素
下面我们开始今天的代码，首先在HTML中建立一个表单：
<!DOCTYPE html> <html class="no-js"> <head lang="en"> <meta charset="UTF-8"> <title>联系我们</title> <link href="style/base.css" rel="stylesheet"> <script src="script/modernizr.min.js"></script> </head> <body> <article> <h1>联系我们</h1> <!--表单--> <form method="get" action="submit.html"> <fieldset> <p> <label for="name">姓名 ：</label> <input id="name" name="name" type="text" placeholder="请输入姓名"/> </p> <p> <label for="email">email：</label> <input id="email" name="email" type="email" placeholder="请输入email"/> </p> <p> <label for="Message">留言：</label> <textarea id="Message" name="Message" cols="45" rows="7" required="required" placeholder="请输入您的留言"></textarea> </p> <input type="submit" value="发送"/> </fieldset> </form> </article> <script src="script/script.js"></script> </body> </html>然后在script.js文件中，添加如下脚本：
/*共享load*/ function addLoadEvent(fun){ var oldLoad = window.onload; if(typeof oldLoad != "function"){ window.onload = fun; }else{ window.onload = function(){ oldLoad(); fun(); } } } function placeholder(form){ /*遍历*/ for(var i=0;i<form.elements.length;i++){ var elem = form.elements[i]; /*提交按钮不需要操作*/ if(elem.type != "submit"){ /*使用Modernizr判断当前浏览器是否支持placeholder属性*/ if(!Modernizr.input.placeholder){ elem.value = elem.placeholder || elem.getAttribute("placeholder"); elem.onfocus = function(){ /*当鼠标焦距时如果表单中的内容时提示信息 那么就不显示 如果不是提示信息 表示用户已经输入内容了 就不需要清空*/ if(this.value == this.placeholder || this.getAttribute("placeholder")){ this.value = ""; } }; elem.onblur = function(){ /*当鼠标离开时 如果value为空说明用户没有输入内容 依然需要显示提示信息*/ if(this.value == ""){ this.value = this.placeholder || this.getAttribute("placeholder"); } } } } } } function getForm(){ /*获取表单*/ /*获取所有表单元素 使用HTML-DOM中的forms对象*/ var form = document.forms; for(var i=0;i<form.length;i++){ placeholder(form[i]); } } /*调用*/ addLoadEvent(getForm);这样就实现了placeholder属性在低版本浏览器中的兼容问题了，是不是很简单，如果有什么疑问的话，欢迎提问~
