ExtJS实现弹出密码输入框

最新推荐文章于 2021-08-23 19:49:05 发布

原创最新推荐文章于 2021-08-23 19:49:05 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #密码

ExtJS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在ExtJS 3.2.1版本中修改弹出输入框为密码输入框。通过分析Ext.MessageBox的源码，将文本框的type由'text'改为'password'，并创建新的MessageBoxPassword方法，实现弹窗输入密码的功能。提供了一个已修改的js文件供下载使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ExtJS实现弹出密码输入框

PS.我使用的ExtJS是3.2.1，比较老的版本了，新版本没试过，不过原理都是一样的，有兴趣的可以尝试一下

使用ExtJS弹出输入框时，很自然的会想到:

Ext.MessageBox.prompt('提示', '请输入',function(btn,text){});

但是当要求输入密文时，就很不方便了，默认是不密文显示的，因此就需要把这个方法改造一下。

根据这个方法可知，弹出框也只是一个文本框，只要把文本框的type=“text”改成type=“password”即可。

首先找到ext-all-debug.js，Ext.MessageBox是在这个文件中的

这里写图片描述

根据ExtJS源码可以看出，前面是定义参数和按钮的，弹出框一定是new出来的一个窗口，然后定义窗口的大小参数样式，然后有一个输入框，继续往下看源码

这里写图片描述

从上图可以看出，跟我预想的一样，是new出来的一个窗口，宽400，高100并且有关闭操作，继续往下看

这里写图片描述

从源码上可以看到第26324行，是定义了一个div，div里面有个文本框，截图显示不全，我单独把它取出来

<div class="ext-mb-icon">
</div>
<div class="ext-mb-content">
    <span class="ext-mb-text"></span>
    <br />
    <div class="ext-mb-fix-cursor">
        <input type="text" class="ext-mb-input" />
        <textarea class="ext-mb-textarea">
        </textarea>
    </div>
</div>

默认的type=“text”，只要改成type=“password”即可密文显示，可改过之后，以后只要调用这个方法，都是密文显示，因此想个办法，那就是重写这个方法，其实很简单，把这段源码全部摘出来，新建一个ext-messageboxpassword.js的文件，把方法名改成MessageBoxPassword，以后需要密文输入框时，直接使用Ext.MessageBoxPassword.prompt('提示', '请输入',function(btn,text){}); 即可

这里我共享出修改好的js文件，需要的可以点击下载，直接引用后调用就行

效果展示：
这里写图片描述