EditTex实现密码的显示隐藏

简介: EditTex实现密码的显示隐藏

在开发app时,登录和注册页面,让输入的密码是否可见的需求还是挺常见的,本以为在代码中直接设置EditText的setInputType属性就行了,谁知还是有一些坑的,本篇文章带你来填坑,前方高能,请速速避退。

完成后的效果

 在开始本文之前,先看下要实现的效果.

开始挖坑

查看EditText的setInputType可以设置的值

 先看下EditText的setInputType可以设置的Type属性有多少

etInputType可以设置的Type属性值远不止这么多,全部的属性可以到 这里查看.查看Type可以设置的值后,发现有两个Type与密码的显示和隐藏有关,分别是

TYPE_TEXT_VARIATION_VISIBLE_PASSWORD

TYPE_TEXT_VARIATION_PASSWORD

根据单词的意思我们知道第一个为显示密码,第二个为密码不可见.

在代码中设置setInputType的值

 根据查询的Type值便可以在代码中通过设置setInputType的值来让EditText输入的值显示隐藏.下面看下代码

//根据图标判断是否显示密码
    private void whetherShowPas(boolean paswdVisible) {
        if (paswdVisible) {
            //设置密码为显示的状态
  mPassWd.setInputType(TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
            img_eye.setImageResource(R.mipmap.dis);
        } else {
            //设置密码为隐藏的状态
     mPassWd.setInputType(TYPE_TEXT_VARIATION_PASSWORD);
            img_eye.setImageResource(R.mipmap.hid);
        }
     mPassWd.setSelection(mPassWd.getText().length());//将光标定位到最后
    }

好了,到这里你以为就完成了,高高兴兴的跑去模拟器运行看效果,但悲催的是,切换这两个状态竟然没用,不能实现开篇时的效果.

填坑之路

 于是,我们又来查官方文档,进入刚刚查看Type值的页面,咦,这里有个Example,如下图

竟然,要再加入一个 TYPE_CLASS_TEXT,好,我们把这个值加入刚才的代码,改变后的代码如下

//根据图标判断是否显示密码
    private void whetherShowPas(boolean paswdVisible) {
        if (paswdVisible) {
            //设置密码为显示的状态
            mPassWd.setInputType(TYPE_CLASS_TEXT | TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
            img_eye.setImageResource(R.mipmap.dis);
        } else {
            //设置密码为隐藏的状态
            mPassWd.setInputType(TYPE_CLASS_TEXT | TYPE_TEXT_VARIATION_PASSWORD);
            img_eye.setImageResource(R.mipmap.hid);
        }
    mPassWd.setSelection(mPassWd.getText().length());//将光标定位到最后
    }

在到模拟器运行一遍,WTF,果然达到了开篇时的效果,在看下TYPE_CLASS_TEXT有什么作用

TYPE_CLASS_TEXT

Class for normal text

TYPE_CLASS_TEXT就是将EditText转化为普通文本类,原来需要将EditText转换为普通文本类设置密码是否可见才能生效。

结束语

 好了,到这里本文就结束了,可以在这里获取本文的源码。


相关文章
|
6月前
|
JavaScript 算法 数据安全/隐私保护
原生JS实现:密码输入框显示隐藏密码效果
原生JS实现:密码输入框显示隐藏密码效果
170 4
|
6月前
|
C#
C# 文本框限制大全
C# 文本框限制大全
55 0
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
获取焦点后隐藏提示内容的输入框
获取焦点后隐藏提示内容的输入框
59 0
|
小程序 JavaScript 数据库
小程序登录按钮遮罩浮层效果
小程序登录按钮遮罩浮层效果
121 0
|
1月前
多行输入框
【10月更文挑战第1天】多行输入框。
26 4
|
1月前
|
数据安全/隐私保护
密码输入框
【10月更文挑战第1天】密码输入框
32 4
|
5月前
|
前端开发 JavaScript
如何在文本域右下角设置字数限制提示
如何在文本域右下角设置字数限制提示
110 3
|
6月前
|
前端开发 数据安全/隐私保护
清除IE10下input的(X)和密码输入框的眼睛图标
清除IE10下input的(X)和密码输入框的眼睛图标
63 0
|
前端开发 C# 数据安全/隐私保护
ApeForms | C# - WinForm临时对话框(消息框、提示框、输入框、密码框、单选框、多选框等)
ApeForms一款基于WinForm实现的开源免费商用的UI库,其中提供了一套便于用户交互的临时对话框组件(Dialog),可用于快速创建开发中常见的交互对话框,例如:消息框、提示框、输入框、单选框、多选框等。 ApeFree.ApeDialogs并不是一个包含Dialog实现的UI库,而是一套Dialog标准(提供了一套临时弹出对话框的实现标准)。 Dialog是界面开发过程中必不可少的组件,无论是桌面开发、Web前端开发、移动端开发,甚至命令行应用程序中的一次“Yes or No”的输入都可以看做是一次Dialog弹框。
549 0
ApeForms | C# - WinForm临时对话框(消息框、提示框、输入框、密码框、单选框、多选框等)
|
开发工具 UED
行为验证码小图标修改
最近行为验证码在很多网站逐步流行起来,对用户体验来说,比较新颖,操作简单。下面我以滑动拼图验证码和文字点选验证码为例,通过 KgCaptcha 来说说如何修改验证码中的图标。
行为验证码小图标修改