积跬步,聚小流-------js实现placeholder的效果
来源:互联网 发布:vue安装sass淘宝镜像 编辑:程序博客网 时间:2024/06/06 00:17
前几天在“技术问答”上问了问题,然后有回复一句话就给概括了:placeholder的效果,不得不说,了解的多了才能说起来言简意赅,用最简单的语言描述最清晰的表达。
但是placeholder属于html5新添加的属性,兼容性还存在问题,查阅思考后,用js实现了它的实现效果。
先来看一下实现效果:
输入密码的时候
这就实现了效果了啊,然后呢,你发现上下图的区别了么,是不是一下子就想到了实现的方法,是的,就这么简单,来简单说一下是实现的原理:
在“登录邮箱”下,放两个input,其中一个是text,另一个是password,当点击的时候显示password,离开的时候显示text,这样就实现了,当然这里有个细节一定要注意,那就是更换显示的input时,注意“聚焦”哦
好了来看一下实现的代码:
<input type="text" id="loginPwd" class="loginText" value="-登录密码-" 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';}}
如果判定没有输入值,并且失去焦点的时候就要返回最初的状态,这样就得到想要的效果了啊。
真的很感谢前几天给我提示的两个哥们,发现真的很多时候是不知道该如何搜索,知道想要的效果,但是不知道该如何更有效的表达,然后进行搜索,导致难度凭空涨了好几个点,还是需要多学习啊,加油...
1 0
- 积跬步,聚小流-------js实现placeholder的效果
- js实现html的placeholder属性效果
- 积跬步,聚小流------具有滑动效果的导航
- 实现UITextView的placeholder效果
- 纯CSS实现select的placeholder效果
- 关于表单用js如何实现占位符placeholder的效果
- textView实现placeholder效果
- IE下实现placeholder效果的jquery插件
- 积跬步,聚小流-------几种方法实现分割线
- javascript 基础 js实现placeholder
- 积跬步,聚小流-------SQL SEVER对表的基本操作
- 积跬步,聚小流-------SQL对数据库表的操作
- 积跬步,聚小流------关于数据类型转换的一个面试题
- 积跬步,聚小流------界面常用的jeecms标签
- 积跬步,聚小流------java获取图片的尺寸
- 积跬步,聚小流------come on,我的2016
- jQuery实现IE浏览器兼容placeholder效果
- 实现IE浏览器兼容placeholder效果
- makefile学习
- 【工程数学】若干种插值算法
- 读取drawable文件夹的图片(根据文件名)
- 如何用 OS X 的 Xcode 写 C 语言程序
- <frameset>和<body>不能共用
- 积跬步,聚小流-------js实现placeholder的效果
- string字符串 获取指定位置范围的子字符串
- CCScriptEventDispatcher(quick扩展类 。用于lua 下的CCNode 事件分发)
- 编程语言的过去、现在和未来
- HTML5开发环境搭建
- JS基础——Cookie与存储
- Java对.properties文件(即java.util.Properties类)的一些操作
- Android Studio:Fetching android sdk component information问题
- iOS开发 - 百度地图后台持续定位