预览：

不知道为什么下面这个窗口中的 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>

一个漂亮的 PlaceHolder的更多相关文章

  1. 一个漂亮的js表单验证页面+验证码

    一个漂亮的js表单验证页面 见图知其意, 主要特性 带密码安全系数的判断 其他的就没有啥啦 嘿嘿嘿 当然,其代码也在Github上 我也准备了一套可以直接Ctrl + v; Ctrl + c 运行的代 ...

  2. ctex moderncv版本更新--用latex写一个漂亮的简历

    我的电脑是win7系统32位,ctex版本是v2.9.2.164 full(http://www.ctex.org/CTeXDownload) 一直不太清楚moderncv里面类似\cventry这种 ...

  3. PS网页设计教程XXIV——从头设计一个漂亮的网站

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  4. 分享一个漂亮的ProgressBar控件

    codeprject上看到的一个漂亮的ProgressBar控件.是用vb.net开发的. C#直接在工具箱中引用即可. 地址:http://www.codeproject.com/Articles/ ...

  5. 小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

    来自:http://blog.csdn.net/dawanganban/article/details/17679069 在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的 ...

  6. 一个漂亮的php验证码类

    一个漂亮的php验证码类(分享)   作者: 字体:[增加 减小] 类型:转载 下面小编就为大家分享一个漂亮的php验证码类.需要的朋友可以过来参考下   直接上代码: 复制代码 代码如下: //验证 ...

  7. 给Ajax一个漂亮的嫁衣——Ajax系列之五（下）之序列化和反序列化

    给Ajax一个漂亮的嫁衣——Ajax系列之五(下)之序列化和反序列化 标签: ajaxdictionaryjsonobject服务器function 2012-07-25 18:41 2242人阅读  ...

  8. 一个漂亮而强大的自定义view

    代码地址如下:http://www.demodashi.com/demo/13502.html 简介 主要提供一个漂亮而强大的自定义SeekBar,进度变化由提示牌 (sign)展示,具有强大的属性设 ...

  9. 一个漂亮而强大的RecyclerView

    代码地址如下:http://www.demodashi.com/demo/13470.html 简介 主要提供了简单易用强大的RecyclerView库,包括自定义刷新加载效果.极简通用的万能适配器A ...

随机推荐

  1. 命令提示符没办法登录MySQL

    前几天在CMD命令下输入  MYSQL -UROOT -P 一直显示命令无效. 后来想知道原来是要在MYSQL的BIN(安装)目录下才能访问该命令,如果要在其他路径下使用sql命令,那么要配置MYSQ ...

  2. selenuim和phantonJs处理网页动态加载数据的爬取

    一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -* ...

  3. Java 7-Java 循环结构 - for, while 及 do…while

    Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...

  4. 五、html5表单

  5. vue实现点击、滑动右侧字母对应各个城市

    1.字母组件给父组件传递当前点击的字母值 @click="handleLetterClick" //绑定事件 handleLetterClick (e) { //向上传递参数 th ...

  6. 阅读别人的程序（Java篇）

    1.递归求数组最大值 2.转账(事务) 1.递归应用 public class DiGuiDemo3 { public static void main(String[] args) { int[] ...

  7. myeclipse内存调整

    内存调整: myeclipse.ini里配置后 1.设置Default VM Arguments 在myEclipse中,打开Windows-> Preferences->Java-> ...

  8. 重识linux-linux系统服务相关

    重识linux-linux系统服务相关 1 tcp wrappers 特殊功能  应用级防火墙 2 系统开启的服务查看 top,ps 命令 3 查看系统启动的服务 1) 找到目前系统开启的网络服务 n ...

  9. web：频繁刷新浏览器的页面【小工具】

    [目的] 频繁刷新某一浏览器页面,小测试一下加载性能,或者打开的文件是否及时关闭,会不会导致服务器奔溃 [小工具] 新建txt,输入以下内容,并保存为html的格式,然后在浏览器中打开,则会定时刷新指 ...

  10. AWS 相关阅读

    http://www.infoq.com/cn/articles/aws-s3-dive-in http://baike.baidu.com/link?url=Jo9OQmjxXZLxyhc6JvaD ...