input 密码显示与隐藏

深藏阁楼爱情的钟 2022-01-19 01:59 480阅读 0赞

H5隐藏密码与显示 HTML

<div class="weui-cell__bd new_password">
                <input class="weui-input" placeholder="请输入您的原始密码"  value='213' type="password" maxlength="16">
            </div>
            <div class="weui-cell__ft">
            <span class="iconfont icon-yanjing1 icon-hide"></span>
            </div>
    复制代码

js

var iconeye=$('.icon-hide'),
    
    	password=$('.new_password').find('input');
    	password.type="password";
    
    	function hideShowpPsw(){
    		if(password.type=='password'){
    			password.type='text';
    			iconeye.removeClass('icon-yanjing1').addClass('icon-yanjing');
    			password.attr('type','text');
    
    
    		}else{
    			password.type='password';
    			password.attr('type','password');
    			iconeye.removeClass('icon-yanjing').addClass('icon-yanjing1')
    				console.log(password);
    		}
    	}
    $('.weui-cell__ft').on('click','span',function(){
    	hideShowpPsw()
    })
    复制代码

转载于:https://juejin.im/post/5cc7e2156fb9a0321556ee30

发表评论取消回复

表情：

评论列表（有 0 条评论，480人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android中EditText的密码显示与隐藏

文章目录代码展示方法一：修改TransformationMethod 布局文件 Activity文件

你的名字/ 2023年09月23日 16:47/ 0 赞/ 130 阅读

相关仿京东显示隐藏密码

![在这里插入图片描述][2020061221083895.gif] 素材 ![在这里插入图片描述][20200612210927899.png] ![在这里插入图

刺骨的言语ヽ痛彻心扉/ 2023年02月17日 06:16/ 0 赞/ 10 阅读

相关显示与隐藏

[vueJS简单的点击显示与隐藏的效果][vueJS] 目前前端框架太多，接触过angular、ember，现在开始倒腾vue 此处用到v-if、v-else、v-sh

淩亂°似流年/ 2022年06月04日 08:07/ 0 赞/ 301 阅读

相关 input隐藏变显示

<input type="text" style="display:none" name="t1" id="t1" value="请输入数字"> <input

迈不过友情╰/ 2022年05月31日 14:37/ 0 赞/ 247 阅读

相关密码隐藏/显示的简单实现

先上效果图吧： ![20180515113121636][] ![201805151131466][] 实现原理：原理很简单，就是通过对显示密码单选框选中状态

短命女/ 2022年05月25日 13:07/ 0 赞/ 455 阅读

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

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

你的名字/ 2022年05月24日 13:21/ 0 赞/ 254 阅读

相关显示与隐藏效果

显示与隐藏效果开发工具与关键技术：DW、显示与隐藏效果作者：黄桂康撰写时间：2019.02.20 本篇介绍下拉框的效果，它只要是两个盒子，一个

谁借莪１个温暖的怀抱￠/ 2022年03月18日 11:17/ 0 赞/ 291 阅读

相关 input 密码显示与隐藏

H5隐藏密码与显示 HTML <div class="weui-cell__bd new_password"> <input clas

深藏阁楼爱情的钟/ 2022年01月19日 01:59/ 0 赞/ 481 阅读

相关 div 显示与隐藏

最近写项目用到DIV隐藏,以下引用[http://www.cnblogs.com/dotLive/archive/2007/04/04/699302.html][http_ww

我不是女神ヾ/ 2021年12月17日 15:45/ 0 赞/ 439 阅读

相关 android editText输入框输入密码的显示与隐藏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

Dear 丶/ 2021年09月17日 08:50/ 0 赞/ 542 阅读