实现Antd中input密码输入框显示为星号

Antd中input密码输入框显示为星号

问题描述
项目中出现两个密码输入框，一个是登录界面，一个是弹框复核界面。
登录时如果选择浏览器保存登录名及密码，复核时会自动输入浏览器记录的登录名及密码，需求是复核时不自动填入浏览器所记住的登录密码

为何出现这个问题
input输入框type为password时，当浏览器保存一次之后，页面中所有的密码输入框都会被浏览器自动识别并填入。

为何解决这个问题
为了带给用户高度安全性，复核及重新校验密码时都是为了达到此操作是否为用户本人操作。防止登录之后出现他人操作安全级别较高的操作。
例如交易场景的提现等，需再次校验交易密码，以及对数据库有操作需要对操作员复核的场景等。

解决方案
input使用passsword一定会被浏览器自动处理，因此我们用text达到输入之后出现星号的问题。
项目建立在antd组件基础上。

页面输入框

 {getFieldDecorator('password', {{validator: this.pwdChange,}],})()}

validator是用来校验实时输入框中的值，也可用onChange进行*号设置。

pwdChange = (rule, value, callback) => {let realValue = this.state.realValue;		// value是输入框的值，因此需要每次包之前的变*号之前的值保存到下来realValue = realValue+value.charAt(value.length-1)this.setState({realValue:realValue})const length  = value.length;let str = ''for(var i =0;i

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！