一个漂亮的 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>

一个漂亮的 PlaceHolder

时间: 2024-10-11 13:34:36

一个漂亮的 PlaceHolder的相关文章

一个漂亮的java烟花程序

<img src="http://img.blog.csdn.net/20140617111511890?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzkxMDM1Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />package org.jetic.web.chat; impo

PHP入门培训教程 一个漂亮的PHP验证码

PHP入门培训教程 一个漂亮的PHP验证码 如何写一个漂亮的PHP验证码?兄弟连PHP培训小编分享一段代码给大家: <?php class Imagecode{ private $width ; private $height; private $counts; private $distrubcode; private $fonturl; private $session; function __construct($width = 120,$height = 30,$counts = 5,$

一个漂亮的PHP验证码

验证码在WEB应用中非常重要,通常用来防止用户恶意提交表单,如恶意注册和登录.论坛恶意灌水等. 自己可以导入字体,可以按照自己的额需要随便修改. 一个漂亮的验证码,体现出网站的大方. <span style="font-size:14px;"><?php class Imagecode{ private $width ; private $height; private $counts; private $distrubcode; private $fonturl;

制作一个漂亮的 Android 应用图标

Android应用图标应当是一个 Alpha 通道透明的32位 PNG 图片.由于安卓设备众多,一个应用程序图标需要设计几种不同大小,如: LDPI (Low Density Screen,120 DPI),其图标大小为 36 x 36 px.MDPI (Medium Density Screen, 160 DPI),其图标大小为 48 x 48 px.HDPI (High Density Screen, 240 DPI),其图标大小为 72 x 72 px.xhdpi (Extra-high

分享一个漂亮的ASP.NET MVC界面框架

本文分享一个插件化的界面框架,该框架提供了用户.角色.权限管理功能,也提供了插件的管理和插件中心.下图是该界面框架的样式(全部源码和原理介绍下一篇分享,推荐越多,源码放的越早,呵呵). 要使用该界面框架,你可以通过以下地址来下载到界面框架的Visual Studio 2013模板:下载框架模板. 模板下载地址:http://files.cnblogs.com/baihmpgy/iOpenWorksMvc1.zip 下载后,解压缩,将iOpenWorksMvc1目录直接拷贝到VS的项目模板目录(C

给Ajax一个漂亮的嫁衣——Ajax系列之五(下)之序列化和反序列化

给Ajax一个漂亮的嫁衣——Ajax系列之五(下)之序列化和反序列化 标签: ajaxdictionaryjsonobject服务器function 2012-07-25 18:41 2242人阅读 评论(6) 收藏 举报  分类: Ajax(6)  版权声明:本文为博主原创文章,未经博主允许不得转载. Ajax最强悍的功能莫过于服务器和客户端之间的异步交互,他们在交互的时候不是通过soap协议等,而是通过回调函数,以Json的格式传送数据. 由于Json格式的限制,在很多情况下,稍微复杂一些的

一个漂亮的php验证码类

一个漂亮的php验证码类(分享) 作者: 字体:[增加 减小] 类型:转载 下面小编就为大家分享一个漂亮的php验证码类.需要的朋友可以过来参考下 直接上代码: 复制代码 代码如下: //验证码类class ValidateCode { private $charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRSTUVWXYZ23456789';//随机因子 private $code;//验证码 private $codelen = 4;//验证码长度 pri

OpenGL 4 : 一个漂亮的心 For you, My Love

画一个心形有非常多公式能够使用,以下这个公式我觉得最完美了: float x = R * 16 * pow(sin(theta), 3); float y = R * (13 * cos(theta) - 5*cos(2*theta) - 2*cos(3*theta) - cos(4*theta)); 画出来的心形最美丽,最原始的笛卡尔的心形是个肥心,没这个好看,呵呵. 效果例如以下: 数学參考: http://mathworld.wolfram.com/HeartCurve.html http

如何快速开发一个漂亮的网站?包括前端的设计,css布局等

如何快速开发一个漂亮的网站?包括前端的设计,css布局等 网站开发看起来简单,但是做起来很乱,对于个人来说尤其如此.比如,需要ps,css,html,js,java等知识,有什么好的办法,可以快速的开发一个网站的前端? 如今有很多快速开发平台:图形化可视化操作,所见即所得:通过拖拉即可完成表单.流程.报表页面的设计:用户通过编写JS文件,调用封装的单据的保存.查询.删除等方法,即可完成页面的功能设计: 平台工具设计的所有的页面发布后,将生成HTML格式的源码文件,WEB系统采用HTML伪静态技术