首页 > 代码库 > 一个漂亮的 PlaceHolder
一个漂亮的 PlaceHolder
预览：
不知道为什么下面这个窗口中的 JavaScript 代码没有运行-_-||，想看实际效果就把下面的代码保存下来打开看吧。
<iframe src="http://jsfiddle.net/JRoger/PCgQF/2/embedded/" frameborder="0" width="100%" height="300"></iframe>
代码：
<!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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。