placeholder屬性的兼容問題

2024-04-27 15:04:32

字體：大中小

來源：轉載

供稿：網友

參考文章：http://www.xuanfengge.com/method-to-realize-similar-form-tips-placeholder.html

經過測試兼容到IE6。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <style type="text/CSS">        input {            display: block;        }        .box {            position: relative;            margin: 20px auto;            width: 300px;        }        #userEmail {            padding: 0 5px 0 35px;            width: 258px;            height: 28px;            line-height: 28px;            border: 1px solid #ccc;        }        #userEmailIcon {            position: absolute;            top: 1px;            left: 1px;            width: 28px;            height: 28px;            background: lightblue;        }        #userEmailTip {            display: none;            position: absolute;            top: 1px;            left: 35px;            width: 258px;            height: 30px;            line-height: 30px;            color: #999;        }		#userEmailIcon img{height:100%;width:100%}    </style></head><body><div class="box">    <input type="text" id="userEmail" placeholder="請輸入您常用的郵箱！"/>    <span id="userEmailIcon"><img src="http://www.iconpng.com/png/messenger/en-ligne.png"/></span>    <span id="userEmailTip">請輸入您常用的郵箱！</span></div><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript" src='http://cdn.xuanfengge.com/wp-content/uploads/2013/01/jquery.placeholder.js'></script><script type="text/Javascript">    $(function() {        $('input, textarea').placeholder();    });    $("input,textarea").css({color:"#bfbfbf"});    $(":input").focus(function(){      $(this).css({color:"#000"});      if($(this).val() ==this.defaultValue){               $(this).val("");         }      }).blur(function(){       if ($(this).val() == '') {             $(this).val(this.defaultValue);             $(this).css({color:"#bfbfbf"});       }     });</script></body></html>但是細心的觀眾就發現啦，僅僅只有一個input的兼容，不能滿足表單的要求，那么我們就參考下面的文章：
http://www.cnblogs.com/roucheng/p/placeholder.html
把上面的代碼我們整理一下
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>HTML5 placeholder 兼容問題</title><meta name="viewport" content="width=device-width, initial-scale=1" />    <style>        body {            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;        }        input, textarea {            font-size: 1em;            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;        }        input {            width: 250px;        }            input[type="radio"], input[type="checkbox"] {                width: auto;            }        label code {            display: inline-block;            width: 200px;        }        textarea {            height: 2em;            width: 20em;            , font-family: sans-serif;        }        .my-placeholder {            color: #aaa;        }        .note {            border: 1px solid orange;            font-size: 13px;            padding: 1em;            background: #ffffe0;        }    </style></head><body>    <h1>Placeholder兼容問題</h1>    <form method="GET" action="">        <input type="radio" name="color" value="red" placeholder="This can't be seen"> Red        <input type="radio" name="color" value="green" placeholder="This can't be seen"> Green        <br />        <input type="checkbox" name="fruits" value="apple" placeholder="This can't be seen"> Apple        <input type="checkbox" name="fruits" value="banana" placeholder="This can't be seen"> Banana        <br />        <input type="hidden" name="hidden" placeholder="This can't be seen" value="secret">        <br />        <input type="search" name="search" placeholder="type=search">        <br />        <br />        <input type="text" name="name" placeholder="type=text">        <br />        <br />        <input type="email" name="email" placeholder="type=email" value="970450647@QQ.com">        <br />        <br />        <input type="url" name="url" placeholder="type=url" value="試試看">        <br />        <br />        <input type="tel" name="tel" placeholder="type=tel">        <br />        <br />        <input type="passWord" name="password" placeholder="type=password" id="p">        <br />        <br />        <textarea name="message" placeholder="textarea"></textarea>        <br />        <input type="text" name="location" disabled="disabled" placeholder="disabled type=text">        <br />        <input type="password" name="code" disabled="disabled" placeholder="disabled type=password">        <br />        <textarea name="comments" disabled="disabled" placeholder="disabled textarea"></textarea>        <br />        <br />        <label for="p">A Label: Click me to focus password field up above</label>        <br />        <br />        <div class="wrapped">            <input type="password" name="password2" placeholder="type=password 2">        </div>        <br />        <input type="submit" value="type=submit">        <input type="reset" value="type=reset">    </form>    <script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>    <script src="http://hovertree.com/texiao/jquery/43/1/jquery.placeholder.js"></script></html>