bootstrap显示隐藏密码

2024-05-21 11:16:13

注意：要引入bootstrap的css、jquery、js

html

<div class="form-group">
   <label class="col-xs-2 control-label">
       原始密码：
   </label>
   <div class="col-xs-10">
       <div class="block input-icon input-icon-right">
           <input name="oldPassword" id="oldPassword" type="password" class="form-control" placeholder="请输入原始密码">
           <i class="ace-icon fa fa-eye" title="显示密码" id="see_oldpwd" οnclick="seePwd(this)"></i>
       </div>
   </div>
</div>

js

//密码隐藏显示
   function seePwd(obj){
       var pwdValue = $(obj).parent().children('input:first-child').val();//获取密码值
       var _type = $(obj).parent().children('input:first-child').attr('type');//获取input的type类型
       if(_type == 'password'){
           $(obj).parent().children('input:first-child').attr('type','text');
           $(obj).attr('class','ace-icon fa fa-eye-slash');
           $(obj).attr('title','隐藏密码');
       }else if(_type == 'text'){
           $(obj).parent().children('input:first-child').attr('type','password');
           $(obj).attr('class','ace-icon fa fa-eye');
           $(obj).attr('title','显示密码');
       }
       $(obj).parent().children('input:first-child').val(pwdValue);
   }

bootstrap显示隐藏密码相关推荐

仿京东显示隐藏密码明文案例（字体图标实现）
仿京东显示隐藏密码明文案例(字体图标实现) 眼睛使用的是 iconfont 阿里矢量图标库的内容链接:https://www.iconfont.cn/search/index?代码案例展示: 字体图 ...
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...
EditText显示隐藏密码
EditText显示(隐藏)密码两种方式第一种: TextInputLayout设置passwordToggleEnabled属性 <android.support.design.widge ...
JSP显示/隐藏密码
显示/隐藏密码点击开/闭眼的图片,即可显示/隐藏密码,代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
elementui 隐藏输入框_vue+element-ui实现显示隐藏密码
最终实现效果显示隐藏密码.gif 实现思路(第一种方法) 因为输入框本身没有切换明文与暗文的功能,所以我们要实现切换功能就需要两个输入框,通过JS来控制样式dispaly:none来指定谁被渲染出来 ...
案例： JS实现显示隐藏密码框
在实现本案例时,要清楚什么时显示隐藏密码框.在我们点击某个图标时,密码框中不可见的密码变为可见的数字,字母和符号的组合. 主要算法: 设置一个flag变量,当flag = 0 时,显示密码(passw ...
前端案例——1.仿京东显示隐藏密码明文案例。
  <!-- 一个按钮两个状态,点击一次,切 ...
checkbox选中selec才可选和显示隐藏密码
学了一个多月,感觉真正开始理解点js了,现在功能都能自己写出来不用问别人,比较开心啦! 1 checkbox选中selec才可选,否则禁用 document.addEventListener('cli ...
input如何显示密码隐藏密码，点击小眼睛显示隐藏密码
目录一.如何单纯的在密码框显示密码二.如何在密码框里面显示并可以隐藏密码三.代码展示四.结果展示一.如何单纯的在密码框显示密码单纯显示密码可以吧type里面的值改成text,如果要隐藏 ...

最新文章

热门文章