一个漂亮的 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相关推荐

用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
一个漂亮的移动端评价页面
源代码下载:一个漂亮的移动端评价页面效果图: 这个水印影响效果了. 源代码下载:一个漂亮的移动端评价页面文件结构图: HTML代码: <!DOCTYPE html> <html& ...
如何在自己的信息管理系统里集成第三方权限控制组件 - 设计一个漂亮的WEB界面...
我们大家都梦想有个完美的各种信息管理系统,其实一个人又会数据库,又会C#.NET程序,还要精通HTML,还要精通CSS,更要精通JS,还有精力去写很多东西,又要调试前台又要调试后台,而且每开发一个系统 ...
一个漂亮的输出MySql数据库表结构的PHP页面
经常为了方便和直观,我们会首先直接在数据库中设计出表,但是接下来又要将表的结构和设计编写在设计文档中,以便编码的时候可以直观的查询,一旦数据库表非常多,字段非常多的时候,这无疑是件非常郁闷的工作. 这 ...
myeclipse如何换一个漂亮的主题
熟悉hbuilder的童鞋们都知道,在开发的时候主题有好几种可以随意切换,但是在开发java时用到的myeclipse的主题是否可以随意切换呢?如果可以在哪里切换,今天我们就来看看如何修改myecli ...
java写七彩文字_【PS精选案例教程】创建一个漂亮的七彩文字
原标题:[PS精选案例教程]创建一个漂亮的七彩文字效果图: 步骤1. 新建一个文档(大小随意) 步骤2. 滤镜→渲染→云彩步骤3. 可以按Ctrl+Alt+F增加效果步骤4. Ctrl+J复制一 ...
【转】博客美化(3)为博客添加一个漂亮的分享按钮
阅读目录 1.社会化分享 2.选择一个分享按钮 3.添加到博客园博客博客园美化相关文章目录:博客园博客美化相关文章目录在前2篇博客"博客美化(1)基本后台设置与样式设置"与&q ...
Android一个漂亮的日历组件源码
简介: Android 一个漂亮的日历组件源码主要特性日历样式完全自定义,拓展性强左右滑动切换上下周月,上下滑动切换周月模式抽屉式周月切换效果标记指定日期(marker) 跳转到指定日期下载 ...

一个漂亮的 PlaceHolder

预览：

代码：

一个漂亮的 PlaceHolder相关推荐

最新文章

热门文章