首页 > 其他 > 详细

React中禁止chrome填充密码表单

时间:2018-06-15 11:40:03      阅读:332      评论:0      收藏:0      [点我收藏+]

当 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

React中禁止chrome填充密码表单

原文:https://www.cnblogs.com/ygunoil/p/9186493.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!