zoukankan      html  css  js  c++  java
  • React中禁止chrome填充密码表单

    当 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}/>

        ... ) }
  • 相关阅读:
    java_JDBC(3)
    java_JDBC(2)
    java_JDBC(1)
    seq语句随笔
    bzoj3159: 决战
    bzoj3905: Square
    bzoj3864: Hero meet devil
    有上下界的网络流问题
    uva12538
    bzoj3280: 小R的烦恼
  • 原文地址:https://www.cnblogs.com/hcxwd/p/7239671.html
Copyright © 2011-2022 走看看