PlaceHolder

HTML

<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>

CSS

* {
				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]...

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];
        }
    }
};