React中禁止chrome填充密码表单

发布时间：2020-12-15 20:28:25 所属栏目：百科来源：网络整理

导读：当 input 的 type="password" 时，chrome浏览器会以 type="password" 为标识记住输入的用户名和密码，如果chrome用户选择记住密码，chrome会把输入过的用户名、密码填充到表单中；在React中，以下2中方法都不能解决问题： 1.在表单前增加2个input并隐藏 in

当 input 的 type="password" 时，chrome浏览器会以 type="password" 为标识记住输入的用户名和密码，

如果chrome用户选择记住密码，chrome会把输入过的用户名、密码填充到表单中；

在React中，以下2中方法都不能解决问题：

1.在表单前增加2个input并隐藏

<input type="text" style="display:none"/>

<input type="password" style="display:none"/>

2.添加 autocomplete="off" 属性

<input type="password" autocomplete="off"/>

React不推崇Dom操作，通过state切换type的值来阻止浏览器的填充行为。

//?初始化state，组建初次渲染时type="text",浏览器不会对表单做填充行为

constructor(props) {
    super(props);
    this.state = {
       type: ‘text‘
    };
}

...

// 点击表单后，改变type
changeType = () => {
   this.setState({ type: ‘password‘ });
}

...

render() {
   return (
　　　 ...

      <Input  type={this.state.type} onClick={this.changeType}/>

　　　 ...
   )
}

React中禁止chrome填充密码表单

标签：表单???struct???off???选择???rom???gety???属性???ops???text???

原文地址：http://www.cnblogs.com/hcxwd/p/7239671.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!