きれいなPlace Holderです.
32835 ワード
プレビュー:
なぜこのウィンドウのJavaScriptコードが実行されていないのか分かりません.実際の効果を見たいなら、下のコードを保存して開けてみてください.
コード:
＜div class=「cnblogs ucode」＞
なぜこのウィンドウのJavaScriptコードが実行されていないのか分かりません.実際の効果を見たいなら、下のコードを保存して開けてみてください.
＜div class=「cnblogs ucode」＞
<!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>