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

最新推荐文章于 2023-03-31 18:02:37 发布
最新推荐文章于 2023-03-31 18:02:37 发布
阅读量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
关注
专栏目录
HTML5 可显示隐藏密码的INPUT密码输入框.rar
07-10
HTML5_密码输入框demo，INPUT样式，去掉背景阴影模仿原生应用的输入框，用一个图片来切换是否显示密码，用到了图片的显示与隐藏、切换技术，使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制，将password的值传给text，隐藏text block，显示password block。
html密码框输入内容隐藏,HTML5表单中password输入框的文字显示与隐藏实现
weixin_33397994的博客
06-03 1887
@问题描述与思路HTML5表单中对于密码输入框password类型可以隐藏用户输入的内容，但有时候会用到允许用户自由显示或者隐藏输入框内容：要实现这个功能首先想到的是用js动态改变input的type类型，觉得将type=password变成type=text隐藏的密码就会显示，但是实际上却实现不了，没有效果，所以，只能换一个思路：放两个input，一个是password，一个是text，...
html input hiden,input hidden属性
weixin_42195978的博客
06-21 1256
今天用到了input标签的type属性设置为hidden。原来一直没有这么用过，仔细询问，查下来，大概有了理解。看看w3school怎么说的：Html Dom Hidden 对象Hidden 对象代表一个 HTML 表单中的某个隐藏输入域。这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据...
html 密码输入框显示隐藏,实现input密码框显示/隐藏的功能
weixin_39646412的博客
06-03 4897
现在很多地方的注册都只有一个密码框，然后再加个显示/隐藏按钮，这样做很简洁，不用再很繁琐的输入两遍密码，用户能自己看到密码输入得对不对。所以幻幻也研究了一发实现方案：1. 首先来个密码框2.CSS让显示/隐藏按钮放在密码框的最右侧.password{position:relative;}.password.n-txtCss{width:90%!important;}.password.fa...
html根据输入判断隐藏或显示,控制input输入框中提示信息的显示和隐藏的方法
weixin_29967003的博客
06-03 2321
在运用html+css+javascrpt进行页面制作时，我们往往会遇到一些影响用户体验，而又容易被我们忽视的小细节。比如，input输入框中的提示信息，怎样才能根据对象获得和失去焦点而实现其显示和隐藏。今天在这里，想跟大家分享一下这个小技巧，希望各位大神不要拍砖哦~~~一、要求input输入框，在光标显示时，隐藏提示信息；光标离开输入框时，显示提示信息。二、方法1、给该input取id名，Onf...
H5用户注册表单页 注册模态框!
09-01
注册表单通常还包括密码输入，这里可以使用`<input type="password">`，但为了安全，应包含显示/隐藏密码的选项。在本示例中，可能有一个切换按钮来控制密码是否可见，通过改变类名（如`.show_pass`和`.show_warn`）...
Javascript的表单与验证-非空验证
01-19
推荐阅读：Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱  JavaScript 可用来在数据被送往服务器前对 HTML 表单中的...
解决Android软键盘弹出覆盖h5页面输入框问题
01-20
首先，问题出现在一个使用Vue构建的H5表单页面上，页面采用了Flex布局。当输入框（input）位于可滚动的中间区域底部时，一旦输入框获取焦点，软键盘弹出，但输入框并未随之移动到可视区域内。这可能是因为Flex布局在...
H5自适应登录和注册表单
03-27
表单可能包含登录和注册两个部分，通过JavaScript或jQuery可以轻松实现页面间的切换，例如使用`class`切换来显示或隐藏相应的内容块，或者利用`history.pushState()`进行无刷新的页面跳转。 5. **AJAX异步提交**：...
H5登录注册表单切换代码.zip
05-31
在这个例子中，可能用到了CSS类来控制表单的显示和隐藏，或者通过过渡和动画效果来增强用户体验。 5. **条件逻辑**： 在JavaScript代码中，可能会包含检查当前表单状态的条件语句，如`if...else`结构，以确定是...
js-仿京东显示隐藏密码
qq_41670147的博客
11-21 1123
<!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-CSS-JS
小玉的小本本
05-04 1265
600字 最近开始和朋友写一个代购的前端页面样式，目前还只是针对于PC端的web界面。有一个需求是：当鼠标移入导航栏的某一个元素时，弹出一个下拉菜单。 在看过几篇度娘的攻略之后，暂定实现原理为：将下拉菜单CSS的display属性默认为none。这样整个下拉菜单就处于隐藏状态。然后在鼠标移入目标元素时，就是触发hover属性时，将下拉菜单的display属性更改为block，这样就完成了整个效果。...
HTML5 input（）标签的使用
qq_52699757的博客
03-28 1576
HTML5 input（）标签的使用
input如何显示密码隐藏密码，点击小眼睛显示隐藏密码
最新发布
m0_62709532的博客
03-31 8083
【代码】input如何显示密码隐藏密码，点击小眼睛显示隐藏密码。
H5 input默认数字键盘，显示为密码格式
weixin_40785245的博客
06-05 3938
input默认数字键盘，显示为密码格式那种小圆点
前端——用H5表单属性制作简易的登陆界面
Searchin_R的博客
09-23 8308
今天学了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密码框显示明文,控制密码输入框是否显示明文
weixin_42697609的博客
06-27 2277
创建账号时，输入密码和确认密码一般都是隐藏的，会有个小眼睛来控制密码是否显示。在开发过程中，发现elementUI的show-password属性并没有生效。只能自己手写喽~首先，给el-input加个小眼睛图标，el-input的type设置为password，效果如下：输入框step1.png代码：//通过prefix-icon和suffix-icon属性在input组件首部和尾部增加显示图标...
html5表单密码验证及提示,HTML5表单及其验证(示例代码)
weixin_39875516的博客
06-19 991
1.输入型控件Input type用途说明email电子邮件地址文本框url网页URL文本框number数值的输入域属性 值 描述max number 规定允许的最大值min number 规定允许的最小值step number 规定合法的数字间隔(如果 step="3"，则合法的数是 -3,0,3,6 等)value number 规定默认值range特定值的范围的数值，以滑动条显示属性 值 描...
h5登录input框浏览器输入账号密码样式设置
weixin_42432439的博客
03-23 2474
当使用浏览器记住的账号和密码登录时，输入框会默认变成白色背景和黑色字体，有时并不符合自己设计的界面的样式，比如暗黑模式，所以需要自己手动设置css。代码如下 input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-text-fill-color: #ccc !important...
H5移动端图片压缩上传实现与踩坑解析
"H5移动端图片压缩上传开发流程" 在H5移动端开发中，图片压缩上传是一个常见的需求，尤其是在用户互动性强的活动中。由于现代手机拍摄的照片通常尺寸较大，直接上传会消耗大量流量，影响用户体验。因此，需要在上传...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值