H5 JS控制input表单密码的显示与隐藏

最新推荐文章于 2021-06-27 19:48:13 发布
最新推荐文章于 2021-06-27 19:48:13 发布
阅读量4.4k 收藏 4
点赞数
分类专栏： H5 文章标签： input H5 密码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itKingOne/article/details/80479538
版权
通过JS动态改变input表单的type属性，结合图标实现密码的显示与隐藏。核心思路是切换输入框类型及加载对应图片。
摘要由CSDN通过智能技术生成

原理：要实现这个功能首先想到的是用js动态改变input的type类型，并动态加载相应的图片。废话不多说，直接上代码：

最低0.47元/天 解锁文章
itKingOne
关注
专栏目录
Html+js的注册界面、form表单、表格、事件、登录密码的隐藏与显示
WRJ_Jack的博客
08-16 5278
用html和js做一个登录/注册界面，不连接数据库，这个案例用到了js的引入，form表单结合表格的布局，以及登录界面常用的密码的隐藏与实现的方法。 进入正题，先看我们的成型案例：如下图 案例大概就是这个样子，讲道理，开始写代码之前得来一波案例分析。 首先，宏观看布局，然后局部看细节。布局来看这个界面的组成也很简单，有六个输入框，一个单选框，一个多选框，以及几个按钮。宏观布局首先抛开功能看界面，...
HTML5 可显示隐藏密码的INPUT密码输入框.rar
07-10
HTML5_密码输入框demo，INPUT样式，去掉背景阴影模仿原生应用的输入框，用一个图片来切换是否显示密码，用到了图片的显示与隐藏、切换技术，使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制，将password的值传给text，隐藏text block，显示password block。
H5 input默认数字键盘，显示为密码格式
weixin_40785245的博客
06-05 3937
input默认数字键盘，显示为密码格式那种小圆点
html5表单密码验证及提示,HTML5表单及其验证(示例代码)
weixin_39875516的博客
06-19 986
1.输入型控件Input type用途说明email电子邮件地址文本框url网页URL文本框number数值的输入域属性 值 描述max number 规定允许的最大值min number 规定允许的最小值step number 规定合法的数字间隔(如果 step="3"，则合法的数是 -3,0,3,6 等)value number 规定默认值range特定值的范围的数值，以滑动条显示属性 值 描...
html密码框显示明文,控制密码输入框是否显示明文
weixin_42697609的博客
06-27 2275
创建账号时，输入密码和确认密码一般都是隐藏的，会有个小眼睛来控制密码是否显示。在开发过程中，发现elementUI的show-password属性并没有生效。只能自己手写喽~首先，给el-input加个小眼睛图标，el-input的type设置为password，效果如下：输入框step1.png代码：//通过prefix-icon和suffix-icon属性在input组件首部和尾部增加显示图标...
创建一个隐藏的下拉菜单 H5-CSS-JS
小玉的小本本
05-04 1265
600字 最近开始和朋友写一个代购的前端页面样式，目前还只是针对于PC端的web界面。有一个需求是：当鼠标移入导航栏的某一个元素时，弹出一个下拉菜单。 在看过几篇度娘的攻略之后，暂定实现原理为：将下拉菜单CSS的display属性默认为none。这样整个下拉菜单就处于隐藏状态。然后在鼠标移入目标元素时，就是触发hover属性时，将下拉菜单的display属性更改为block，这样就完成了整个效果。...
H5用户注册表单页 注册模态框!
09-01
注册表单通常还包括密码输入，这里可以使用`<input type="password">`，但为了安全，应包含显示/隐藏密码的选项。在本示例中，可能有一个切换按钮来控制密码是否可见，通过改变类名（如`.show_pass`和`.show_warn`）...
Javascript的表单与验证-非空验证
01-19
推荐阅读：Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱  JavaScript 可用来在数据被送往服务器前对 HTML 表单中的...
H5自适应登录和注册表单
03-27
表单可能包含登录和注册两个部分，通过JavaScript或jQuery可以轻松实现页面间的切换，例如使用`class`切换来显示或隐藏相应的内容块，或者利用`history.pushState()`进行无刷新的页面跳转。 5. **AJAX异步提交**：...
h5登录input框浏览器输入账号密码样式设置
weixin_42432439的博客
03-23 2473
当使用浏览器记住的账号和密码登录时，输入框会默认变成白色背景和黑色字体，有时并不符合自己设计的界面的样式，比如暗黑模式，所以需要自己手动设置css。代码如下 input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-text-fill-color: #ccc !important...
html5 input hide,javascript - Can I hide the HTML5 number input’s spin box? - Stack Overflow
weixin_39627481的博客
06-17 70
Short answer:input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}input[type="number"] {-moz-appearance: textfield;}Long...
html根据输入判断隐藏或显示,控制input输入框中提示信息的显示和隐藏的方法
weixin_29967003的博客
06-03 2321
在运用html+css+javascrpt进行页面制作时，我们往往会遇到一些影响用户体验，而又容易被我们忽视的小细节。比如，input输入框中的提示信息，怎样才能根据对象获得和失去焦点而实现其显示和隐藏。今天在这里，想跟大家分享一下这个小技巧，希望各位大神不要拍砖哦~~~一、要求input输入框，在光标显示时，隐藏提示信息；光标离开输入框时，显示提示信息。二、方法1、给该input取id名，Onf...
html input hiden,input hidden属性
weixin_42195978的博客
06-21 1255
今天用到了input标签的type属性设置为hidden。原来一直没有这么用过，仔细询问，查下来，大概有了理解。看看w3school怎么说的：Html Dom Hidden 对象Hidden 对象代表一个 HTML 表单中的某个隐藏输入域。这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据...
html jq 控制显示密码,js、jquery分别实现点击密码输入框密码显示和隐藏
weixin_39633090的博客
06-16 622
很多密览始不次这得是觉砖怎可我滚脑选的方近器上码框都有个眼睛标记，点击能显示密码。原理就是点击切换password为te要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标近用功的xt等显示主要知识点：onmousedown：鼠标按下时事件示例：document.getElementById("btn").onmousedown=function(){};onmous...
表单密码显示与隐藏_HTML表单中的密码：允许客户端显示或隐藏
cunchi8090的博客
07-22 6531
表单密码显示与隐藏Introduction 介绍 If you're like most people, you have occasionally made a typographical error when you're entering information into an online form. And to your consterna...
前端——用H5表单属性制作简易的登陆界面
Searchin_R的博客
09-23 8301
今天学了H5新增的表单属性，知道如何用新增的那些属性（如form、placeholder）制作一个建议的登陆界面。界面如下： 源代码如下： &lt;html&gt; &lt;head&gt; &lt;head&gt; &lt;body&gt; &lt;form method="post"&gt; 用户名：&lt;input type="text" name="
html密码框输入内容隐藏,HTML5表单中password输入框的文字显示与隐藏实现
weixin_33397994的博客
06-03 1885
@问题描述与思路HTML5表单中对于密码输入框password类型可以隐藏用户输入的内容，但有时候会用到允许用户自由显示或者隐藏输入框内容：要实现这个功能首先想到的是用js动态改变input的type类型，觉得将type=password变成type=text隐藏的密码就会显示，但是实际上却实现不了，没有效果，所以，只能换一个思路：放两个input，一个是password，一个是text，...
js-仿京东显示隐藏密码
qq_41670147的博客
11-21 1121
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
H5移动端图片压缩上传实现与踩坑解析
"H5移动端图片压缩上传开发流程" 在H5移动端开发中，图片压缩上传是一个常见的需求，尤其是在用户互动性强的活动中。由于现代手机拍摄的照片通常尺寸较大，直接上传会消耗大量流量，影响用户体验。因此，需要在上传...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值