关于密码的显示和隐藏

我们经常在开发中经常遇到密码是以密码的格式显示还是以文本的格式显示,在这给大家提供一个小思路,以后遇到了可以参考参考

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .pass{
                width:200px;
                height: 20px;
            }
        </style>
        <script type="text/javascript" src="jquery1.12.3.js"></script>
        <script>
            /**
             * 普通js方法鼠标事件模拟密码显示隐藏
             */
            /* window.onload=function(){
                var btn=document.getElementById("btn");
                var pass=document.getElementById("pass")
                btn.onmousedown=function(){
                    pass.type="number"
                };
                btn.onmouseup=btn.onmouseout=function(){
                    pass.type="password"
                }
            }
            */
            /**
            * Jquery click事件实现密码显示隐藏
            */
            $(document).ready(function(){
                $("#btn").click(function(){
                //$("#w3s").attr("href")
                    if($("#pass").attr("type")=="password"){
                        $("#pass").attr({type:"text"});
                    }else{
                        $("#pass").attr({type:"password"});
                    }
                });
            });
            /**
             * JQuery鼠标事件模拟密码显示隐藏
            */
            /* $(function(){
            $("#btn").mousedown(function(){
                    $("#pass").attr({type:"text"});
               });
               $("#btn").mouseup(function(){
                    $("#pass").attr({type:"password"});
               });
            });*/
        </script>
    </head>
    <body>
        <input type="password" name="" id="pass" value="123456" class="pass"/>
        <input type="button" name="" id="btn" value="点击显示" />
    </body>
</html>
时间: 2024-12-21 03:51:10

关于密码的显示和隐藏的相关文章

js控制密码的显示与隐藏实例

原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>案例测试</title> 6 <link rel="stylesheet" href=&

Android文本输入框(EditText)切换密码的显示与隐藏

package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; import android.text.Spannable; import android.text.method.HideReturnsTransformationMethod; import android.text.method.PasswordTransformationMethod; im

IOS swift实现密码的显示与隐藏

最近做项目遇到一个需要做密码的显示与隐藏功能,简单从功能上讲是比较简单的,但是,ios有个恶心的BUG,就是在切换显示密码后再隐藏密码时输入就被清空了,这个非常不友好,为了解决这个问题,我在网上找了相关文章,得到了一些启发,解决了这个问题,在这里分享出来供给大家参考与学习! 代码如下: importUIKit class MyTextField:UITextField,UITextFieldDelegate{ private var maxLength=11 overrideinit(frame

输入框密码切换显示或隐藏功能的实现

在一些网站或web app登陆的时候输入密码时有一个显示或者隐藏密码字符的开关,个人想到实现方法应当是js动态修改input标签的type属性,当type为text的时候会显示密码内容,而type为password的时候则会显示为圆点或者星号等,以下是demo: html: 1 <input type="password" id="pwd"> 2 <button id="clc">click</button>

Android之密码的显示与隐藏

很多应用都是显示与隐藏密码的功能. 之前的项目都没这个功能要求,也没有专门研究这个.最近项目有加这个功能,我这里也刚好整理一下. 我的思路是设置EditText的InputType.代码如下: if (mPasswordVisible) { //设置EditText的密码为可见的 edtPassword.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD); } else { //设置密码为隐藏的 edtPassword.set

js密码修改显示与隐藏效果

一.添加input框 <form class="login_form"> <input class="password inputpwd" id="oldpwd" name="oldpwd" type="password" placeholder="请输入旧密码" /> <div class="invisible" onclick=&qu

密码输入框的显示与隐藏

密码的显示与隐藏  只需切换type 为text,或者password. html <li class="aui-list-item"> <div class="aui-list-item-inner"> <div class=" iphoe-pic suo-pic"></div> <div class="see"> <img src="../imag

JQuery插件开发之如何实时显示被隐藏的输入框密码

原文链接:http://www.gbtags.com/gb/share/5827.htm 我们前面曾经介绍过如何提高用户界面表单性能,同时我们也介绍过如何避免使用密码框来避免隐藏输入的密码,也讨论过隐藏密码显示对于用户体验将有多么糟糕. 基本上对于密码输入处理我们有如下俩个可选方式: 继续使用密码框控件,不考虑用户的操作体验 使用一般的输入框,不考虑用户密码的安全性 这就是为什么我们这里需要开发一个鼠标悬浮可显示密码的控件作为第三选择的原因,既可以提高安全,同时也可以大大满足用户体验 今天将讲解

js实现密码框的点击眼睛的显示与隐藏

密码框的点击眼睛的显示与隐藏,图标引用是bootstrap中的fontawesome (复制整个 font-awesome 文件夹到您的项目中) 还需要引入 <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="Fo