placeholder属性的兼容问题

最新推荐文章于 2021-10-25 11:39:54 发布

邓波home

最新推荐文章于 2021-10-25 11:39:54 发布

阅读量1.3k

点赞数 1

分类专栏： web前端

http://www.shunar.cn http://www.geiar.com http://jgsxx.cn

本文链接：https://blog.csdn.net/dengboblog/article/details/54861793

版权

web前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

参考文章：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>