使用Modernizr+HTML-DOM实现placeholder兼容低版本浏览器

来源：互联网发布：全国高校网络培训中心编辑：程序博客网时间：2024/05/20 03:44

众所周知，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属性在低版本浏览器中的兼容问题了，是不是很简单，如果有什么疑问的话，欢迎提问~

阅读全文

0 0