前几天在“技术问答”上问了问题,然后有回复一句话就给概括了:placeholder的效果,不得不说。了解的多了才干说起来言简意赅,用最简单的语言描写叙述最清晰的表达。

可是placeholder属于html5新加入的属性,兼容性还存在问题,查阅思考后,用js实现了它的实现效果。

先来看一下实现效果:

输入password的时候

这就实现了效果了啊。然后呢,你发现上下图的差别了么,是不是一下子就想到了实现的方法,是的。就这么简单,来简单说一下是实现的原理:

在“登录邮箱”下,放两个input,当中一个是text,还有一个是password。当点击的时候显示password,离开的时候显示text。这样就实现了,当然这里有个细节一定要注意,那就是更换显示的input时,注意“聚焦”哦

好了来看一下实现的代码:

<input type="text" id="loginPwd" class="loginText"  value="-登陆password-" onclick="change()" onmouseover=this.focus();this.select();>
<input type="password" name="loginPwd" id="realPwd" style="display: none;" class="loginText" onBlur="back()">

首先,将password和text都罗列上。让password先保持display为none。点击的时候调用js

function change(){
document.getElementById("loginPwd").style.display='none';
document.getElementById("realPwd").style.display='inline';
document.getElementById("realPwd").focus();
}

然后。假设想返回初始状态的话,就调用back()方法

function back(){
var msg=document.getElementById("realPwd").value;
if(msg.length==0){
document.getElementById("loginPwd").style.display='inline';
document.getElementById("realPwd").style.display='none';
}
}

假设判定没有输入值,而且失去焦点的时候就要返回最初的状态。这样就得到想要的效果了啊。

真的非常感谢前几天给我提示的两个哥们。发现真的非常多时候是不知道该怎样搜索,知道想要的效果。可是不知道该怎样更有效的表达,然后进行搜索。导致难度凭空涨了好几个点。还是须要多学习啊,加油...

积跬步,聚小流-------js实现placeholder的效果的更多相关文章

  1. 积跬步,聚小流------Bootstrap学习记录(3)

    响应式作为Bootstrap的一大特色.栅格系统可谓是功不可没,既然如此,那我们就来看一下栅格系统是怎样帮助bootstrap实现响应式布局的呢? 1.什么是栅格系统 我们能够从Bootstrap的官 ...

  2. 积跬步,聚小流------Bootstrap学习记录(2)

    现阶段开启每一次新的征程,已然离不开"Hello World"的习惯仪式.这次自然也不例外.先来看下给出的官网给出的演示样例: 1.bootstrap官网提供的html基本模板代码 ...

  3. 积跬步,聚小流------关于UML类图

    UML的存在 类图是使用频率比較高的UML图,它用于描写叙述系统中所含的类以及它们之间的相互关系,帮助人们简化对系统的理解,也是系统分析和设计阶段的重要产物,也是系统编码和測试的重要类型根据. UML ...

  4. 积跬步,聚小流------ps有用小技巧,改变png图标颜色

    *  实现效果: 原图:  改动后: *  实现目的: 满足为实现不同界面色彩搭配改动png图标的颜色 *  实现方法: 1.打开Photoshop工具,导入须要进行改动的png图标: 2.对导入的图 ...

  5. 积跬步,聚小流------界面经常使用的jeecms标签

    * JEECMS初印象 第一次接触JEECMS,突然脑海就浮现了一句话"20元建站,立等可取",原来这都是真的... * JEECMS的界面经常使用标签 临时忽略掉环境搭建.栏目配 ...

  6. 积跬步,聚小流------Bootstrap学习记录(1)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  7. 积跬步,聚小流------java信息生成图片

    需求: 是在做证书的时候碰到的这个问题. 当时需求是能够进行在线打印证书,第一次进行的操作是直接打印html,并且已经排好版(用jqprint插件)进行打印.在打印时碰到了兼容的问题,另外因为背景图片 ...

  8. 积跬步,聚小流------java获取图片的尺寸

    在一篇文章中获取到通过例如以下两种方式进行获取: 1.使用ImageReader进行获取: 2.使用BufferedImage进行获取: 而且经过验证ImageReader进行操作的耗时远远低于Buf ...

  9. qingshow “不积跬步无以至千里,不积小流无以成江海”。--荀子《劝学篇》 用tomcat+花生壳搭建自己的web服务器+域名(参考)

    链接地址:http://www.blogjava.net/qingshow/archive/2010/01/17/309846.html 用tomcat搭建web服务器 目标:免费拥有自己的网站及域名 ...

随机推荐

  1. C# XML 文档注释

    原文链接:http://www.shinater.com/DocsBuilder/help.html <summary>description</summary> 描述类型或类 ...

  2. gentoo系统安装

    1. Gentoo常用镜像   ===>http://www.linuxsir.org/bbs/thread263600.html 2. 安装方式1 http://www.linuxidc.co ...

  3. VMware下三种网络连接模式

    VMware下三种网络连接模式 Bridged(桥接模式) 在桥接模式下,VMware虚拟出来的操作系统就像是局域网中的一独立的主机,它可以访问该类网段内任何一台机器. 桥接网络环境下需要做到: 手动 ...

  4. CentOS 7命令行安装图形界面(GNOME、KDE等)

    CentOS 7 默认是没有图形化界面的,但我们很多人在习惯了 Windows 的图形化界面之后,总是希望有一个图形化界面从而方便我们使用,这里介绍一下 CentOS7安装图形化桌面系统的方法. 一. ...

  5. WinForm1

    一.窗体的各种属性 二.控件 1.公共控件 2.容器控件 3.菜单控件

  6. NET 架构指南频道

    NET 架构指南频道 微软在Visual Studio 2017 正式发布的时候也上线了一个参考应用https://github.com/dotnet/eShopOnContainers , 最近微软 ...

  7. 【LOJ】#2526. 「HAOI2018」苹果树

    题解 这计数题多水啊我怎么调了那么久啊 我不想老年化啊QAQ (注意这里的二叉树带标号) 考虑\(g[i]\)表示\(i\)个点二叉树所有节点的深度和,\(f[i]\)表示\(i\)个点的二叉树两两节 ...

  8. 【noip模拟赛1】古韵之鹊桥相会(最短路)

    描述 迢迢牵牛星,皎皎河汉女. 纤纤擢素手,札札弄机杼: 终日不成章,泣涕零如雨. 河汉清且浅,相去复几许? 盈盈一水间,脉脉不得语. ——<古诗十九首> 传说,上古时期的某个七月七日,王 ...

  9. java轻松实现无锁队列

    1.什么是无锁(Lock-Free)编程 当谈及 Lock-Free 编程时,我们常将其概念与 Mutex(互斥) 或 Lock(锁) 联系在一起,描述要在编程中尽量少使用这些锁结构,降低线程间互相阻 ...

  10. forEach的坑

    使用js里的forEach来遍历数组的时候需要注意的是:break,return语句不能使其中断,它还是会继续遍历完数组的每一个元素 错误代码: function nameExit(name){ da ...