纸上得来终觉浅，绝知此事要躬行。

 

一个漂亮的 PlaceHolder

预览：

不知道为什么下面这个窗口中的 JavaScript 代码没有运行-_-||，想看实际效果就把下面的代码保存下来打开看吧。

代码：

<!DOCTYPE HTML>
<html lang="ZH-CN" dir="ltr">
    <head>
        <title></title>
        <style>
            * {
                line-height: 142%;
            }

            html {
                overflow: auto;
            }

            div.textbox, select {
                width: 320px;
                /*以下两个属性在实际使用时需要去掉*/
                margin-top:20px;
                margin-left:20px;
            }

            div.textbox > div {
                margin-bottom: 8px;
            }

            body {
                margin: 0;
                font-family: "Microsoft Yahei UI","Microsoft Yahei",Verdana,Simsun,"Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,sans-serif;
                color: #000;
                background-color: #fff;
                background-image: none;
                background-repeat: repeat;
                background-position: top left;
                direction: ltr;
                font-size: 88%;
                -webkit-font-smoothing: antialiased;
            }

            input, select, textarea, button {
                font-size: 100%; outline:none;
                font-family: "Microsoft Yahei UI","Microsoft Yahei",Verdana,Simsun,"Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,sans-serif;
            }

                input[type=text], input[type=password], input[type=email], input[type=tel] {
                    ime-mode: inactive;
                }

                input[type=email], .ltr_override {
                    direction: ltr;
                }

                input[type=text], input[type=password], input[type=email], input[type=tel] {
                    padding: 4px 8px;
                    height: 1.46em;
                    width: 302px;    /* padding-left 和 padding-right 为 8+8  还有 border-left 和 border-right 为 1 + 1 ，所以 width 为 320 - 16 - 2 */
                }

            input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=search], textarea {
                width: 18.54em;
                padding: 4px 8px;
                font-family: "Microsoft Yahei UI","Microsoft Yahei",Verdana,Simsun,"Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,sans-serif;
                font-size: 100%;
                color: #212121;
                border: 1px solid #bababa;
                background-color: rgba(255,255,255,.8);
                filter:Alpha(opacity=80);
            }

            input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=search] {
                height: 1.57em;
            }

            input[type=text], input[type=password], input[type=email], input[type=tel] {
                width: 302px;
            }

            div.placeholder {
                color: #666;
                background-color: transparent;
                margin-top: 7px; margin-top:6px \9;
                margin-left: 9px;
                white-space: nowrap;
            }

            div.ltr_override.placeholder {
                margin-left: 9px;
                margin-right: auto;
                text-align: left;
            }
        </style>
        <script type="text/javascript">
            function InpFocus(obj) {
                var login = obj;

                login.style.border = "1px solid #999";
            }
            function InpBlur(obj) {
                var login = obj;

                login.style.border = "1px solid #bababa";
            }
            function InpKeypress(obj) {
                var login = obj;

                if (login.value === "" && window.event.keyCode === 8) return;

                var placeHolder = login.nextElementSibling || util.getNextSibling(login.nextSibling);

                placeHolder = util.getDomNode(placeHolder.childNodes);

                placeHolder.innerText = "";
            }
            function InpKeyup(obj) {
                var login = obj;
                var placeHolder = login.nextElementSibling || util.getNextSibling(login.nextSibling);

                placeHolder = util.getDomNode(placeHolder.childNodes);

                if (login.value === "") {
                    placeHolder.innerText = "用户名"
                } else {
                    placeHolder.innerText = ""
                }
            }

            var util = {
                getNextSibling: function (node) {
                    var n = node;

                    while (n.nodeType != 1) {
                        n = n.nextElementSibling || n.nextSibling;
                    }

                    return n;
                },
                getDomNode: function (arr) {
                    for (var i = 0; i < arr.length; i++) {
                        if (arr[i].nodeType === 1) return arr[i];
                    }
                }
            };
        </script>
    </head>

    <body>
        <div class="textbox">
            <div style="width: 100%; position: relative;">
                <input id="login" name="login" class="ltr_override" type="text" style="position:relative; z-index:6;" autocomplete="off"
                        onfocus="InpFocus(this);" onblur="InpBlur(this);" onkeypress="InpKeypress(this);" onkeyup="InpKeyup(this);" />
                <div class="phholder" style="left: 0px; top: 0px; width: 100%; position: absolute; z-index: 5;">
                    <div class="placeholder ltr_override" aria-hidden="true" style="cursor: text;">用户名</div>
                </div>
            </div>
        </div>
    </body>
</html>

posted on 2014-07-05 11:28  JRoger  阅读(2230)  评论(0)  编辑  收藏  举报

导航