前端实现input标签输入框密码框显示文字效果

背景：各种登录网址账号密码输入框中的显示文字效果，当点击输入框时，显示的文字消失，当离开输入框后再次显示默认的文字

思路：采用 input 标签，给它设置 CSS 样式，这里本人将两个 input 标签放在同一行，并且希望两个 input 标签中间的间隙能够设置，想到了利用浮动 float 的知识，给第一个标签添加左浮动，同时要给父盒子的 font-size 设定为 0 ；给 input 设定的CSS样式属性添加一个 margin-right 的值。利用 JavaScript 的 DOM 事件知识，先获取元素，后注册事件（函数），利用 if 语句判断，点击 input 框（注册鼠标事件 onfocus）就显示空字符串，并改变文本框的边框（border）颜色，原先的文本框颜色设置为 #999；边框轮廓默认值设置不存在 none ；当失去鼠标焦点 onblur 后，文本框显示默认文字，代码实现如下：

HTML 代码：

<body><div class="box"><input type="text" value="邮箱/ID/手机号" style="float: left;" class="ipd"><input type="text" value="密码" class="psw"></div>

CSS 样式：

<style>.box {font-size: 0;}input {color: #999;outline: none;margin-right: 20px;}
</style>

JavaScript 部分：

<script>var ipd = document.querySelector('.ipd');var psw = document.querySelector('.psw');ipd.onfocus = function () {if (ipd.value === '邮箱/ID/手机号') {ipd.value = '';}this.style.border = '1px solid pink';}ipd.onblur = function () {if (this.value === '') {this.value = '邮箱/ID/手机号';}this.style.border = '1px solid #999';}psw.onfocus = function () {if (psw.value === '密码') {psw.value = '';}this.type = 'password';this.style.border = '1px solid pink';}psw.onblur = function () {if (this.value === '') {this.value = '密码';}this.type = 'text';this.style.border = '1px solid #999';}
</script>

*注：欢迎批评指正

前端实现input标签输入框密码框显示文字效果相关推荐

html密码框输入内容隐藏,密码框显示提示文字的功能实现
在密码输入框内显示提示的文字,引导用户操作,实现的效果如下图显示. 未输入密码前: 输入密码后: 由于js无法直接控制input文本框中的type属性,因此无法通过js控制input文本框在密码框和普 ...
密码的显示与隐藏php,el-input 标签中密码的显示和隐藏功能的实例代码
效果展示: 密码隐藏: 密码显示: 代码展示: 一:标签代码二: var app = new Vue({ el:"#app", data:{ users:[], total:10 ...
实现动态验证element输入框密码框
实现动态验证element输入框密码框 1.前提需求: 1.某个页面需要展示输入框的密码,但是更改过的密码后端给我们返回六个*** [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 ...
html密码框输入内容隐藏,jQuery输入框密码的显示隐藏【代码分享】
效果图: 代码如下: jQuery输入框密码显示隐藏代码 @font-face {font-family: "iconfont"; src: url('iconfont.eot') ...
微信小程序input输入框密码的显示与隐藏
1.实现效果 2.实现原理 input的type之中并无password属性. 小程序提供了一个password属性,用来表示是否是密码类型. 关键思路:动态改变password的值,从而实现密码的显 ...
php输入框里的提示文字,input标签输入框带提示文字方法
本文主要介绍了input 标签实现输入框带提示文字效果(两种方法),需要的朋友可以参考下,希望能帮助到大家. 方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个 ...
点击密码框显示密码（点击密码框小眼睛可显示输入密码）
案例分析` 登录注册页面中,当我们输入密码时,密码显示的是不可见的,是属于密码框类型,点击小眼睛之后显示密码. **核心思路:**1.点击眼睛按钮,把不可见的密码框类型改成可见的文本框就可看见里面的密 ...
html密码框显示明文,控制密码输入框是否显示明文
创建账号时,输入密码和确认密码一般都是隐藏的,会有个小眼睛来控制密码是否显示.在开发过程中,发现elementUI的show-password属性并没有生效.只能自己手写喽~ 首先,给el-input ...
表单项标签的input标签的单选框（radio）
<input type="radio" name="gender" value="male"> 男 <input type ...

前端实现input标签输入框密码框显示文字效果

HTML 代码：

CSS 样式：

JavaScript 部分：

前端实现input标签输入框密码框显示文字效果相关推荐

最新文章

热门文章