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

    ...
   )
}
时间: 2024-07-30 20:26:35

React中禁止chrome填充密码表单的相关文章

React中禁止chrome填充表单

总结:在react中浏览器只会在第一次初始化dom树时将默认的用户名和密码渲染上(只有当页面中存在密码框时才会进行,所以react有如下解决方法) 当 input 的 type="password" 时,chrome浏览器会以 type="password" 为标识记住输入的用户名和密码, 如果chrome用户选择记住密码,chrome会把输入过的用户名.密码填充到表单中: 在React中,以下2中方法都不能解决问题: 1.在表单前增加2个input并隐藏 <

chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来. 这个原因是我草率的直接设置在input元素里面,结果问题就来了.所以如果把这个图标放在input表单外面,就不会出现这个问题. 二.表单自动填充会添加浏览器默认样式怎么处理和避免 第二张图,就是表单自动填充后,

React中的表单应用

React中的表单应用 用户在表单填入的内容,属于用户跟组件的互动,所以不能用this.props读取. var Input = React.createClass({ //初始化组件数据 getInitialState(){ return {value:'hello'}; }, handleChange(event){ this.setState({value:event.target.value}) }, render(){ var value = this.state.value; <di

hiho #1361 Playfair密码表

题目1 : Playfair密码表 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho经常用Playfair密码表加密自己的代码. 密码表是按以下步骤生成的. 1. 随机选择一个只包含大写字母的单词S作为密钥. 2. 将S中的所有字母J替换为字母I. 3. 将S中的字母依次填写进一个5x5的矩阵,按照从上到下.从左到右的顺序填充格子.填充过程中略过已经在密码表中的字母. 4. 将'A'-'I', 'K'-'Z'(除去J之外的所有大写字母)中没有出现在密码

React中setState同步更新策略

本文和大家分享的主要是React中setState同步更新相关内容,希望对大家学习React有所帮助. 为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于 this.state 来计算未来状态.典型的譬如我们希望在从服务端抓取数据并且渲染到界面之后,再隐藏加载进度条或者外部加载提示: componentDidMount() { fetch('https://example.com') .then((res) => re

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果.   React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快  Chrome刚出来的时候,在Chrome里跑Javascript非

CSS禁止Chrome谷歌浏览器激活输入框后自动添加橘黄色边框

Chrome默认会为所有的输入框加上橘黄色的边框,虽然有时候可以使我们的网站看起来更友好,但对自定义的样式是有影响的.当鼠标点击输入框时,在谷歌chrome浏览器中,光标移到输入框时激活输入框会被加上橘黄的边框,鼠标光标移开输入框后被加橘黄色边框消失.这个谷歌浏览器自动为输入框加css样式非常不美观影响效果,这里介绍解决在谷歌浏览器中禁止被激活输入框加橘黄色样式. 例如做了一个圆角框的input输入框,如果没有对边框focus时的属性做任何休息,Chrome将默认加上一个正方形的边框,无视你将i

React文档(十)表单

HTML元素和 React里的其他DOM元素有些不同,因为它们会保留一些内部的状态.举个例子,这个普通的表单接受一个name值: <form> <label> Name: <input type="text" name="name" /> </label> <input type="submit" value="Submit" /> </form> 这个表

使用jQuery将数据快速填充到表单

作为WEB程序员,我们经常与表单打交道.例如在通过表单编辑一些数据时,读取后台数据并填充到表单是一件繁琐的事情,尤其是表单域很多而且包含radio,checkbox,select等的时候.你一定见过下面的代码: <select name="area"> <option value="nankai" <?php if($area=='nankai') echo 'selected="selected"';?>>南