使用自动完成的值填充状态(反应)

2024-02-09

我有一个带有输入字段和一个按钮的组件,除非在输入字段中输入正确的值,否则该组件将被禁用。这工作正常,但是当 chrome 在页面加载时自动完成这些值时,状态不会改变,因此按钮保持禁用状态。如果您在表单内单击或更改值,状态会正确更改。

组件加载时如何从自动完成中获取值?自动完成不会触发 onChange 或 onBlur 事件,并且 autocomplete="off" 也不起作用。 (而且我不想关闭自动完成功能)


我最近在处理登录页面时遇到了这个问题。经过一番研究后,我发现这个问题 https://github.com/facebook/react/issues/1159#issuecomment-506584346ReactJS github 上有报道。引用关键部分:

如果我们能够在页面加载后访问自动填充的值,那么编写恶意代码来提取用于网络钓鱼的表单上的信息将变得非常容易。不给用户反应的机会。可能是浏览器忽略 autocomplete="off" 的部分原因。

为了克服这个问题,我们需要:

  1. 接受这样一个事实:当 DOM 节点挂载时,我们不会(也永远不会)访问自动填充的值
  2. 接受浏览器带来的安全问题

tl;dr - 这是出于安全原因而故意的,最好在提交时验证输入。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用自动完成的值填充状态(反应) 的相关文章

  • 如何使用 JavaScript 将当前页面设置为 about:blank?

    我遇到的情况是服务器可能在当前地址上不可用 因此我想检测到这一点并将页面重定向到 about blank 页面 我该如何使用 JavaScript 来做到这一点 window location href about blank
  • 将随机字符串转换为十六进制颜色

    我的应用程序中有一个操作日志表 我想根据该条目的 sessionID 为行分配随机颜色 以帮助查看模式 分组操作 到目前为止我有这个 console log stringToColorCode mj3bPTCbIAVoNr93me1I fu
  • Javascript:混合构造函数模式和揭示模块模式

    有什么方法可以让 Javascript 类扩展通过揭示模块模式创建的对象吗 我尝试了下面的代码 但是有没有办法实现同样的事情 sv MergeQuestionViewModel function this sv QuestionDetail
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • 具有两组子组件的 React 组件

    我正在创建一个组件 需要接收两组子组件并放置在组件的两个不同部分中 let CreditCardForm icons fields gt div div div div icons div div div fields div let Cr
  • Angular.js:未捕获的错误,没有模块:myapp

    我也在尝试引导 angular js 项目 这是我的index html div p Loading p div
  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp
  • less.js - 在解析器回调中获取变量值

    我正在使用 less js 1 3 0 在客户端将 less 解析为 css 在解析器的回调中 我想获取每个变量的值 我尝试了以下方法但没有成功 var data colour red example background color co
  • 如何解决错误 EGL 驱动程序消息(错误)eglQueryDeviceAttribEXT:使用 Selenium 和 Python 的错误属性

    我从 selenium 收到随机错误消息 即使它们都与我正在运行的确切 Web 驱动程序命令无关 据我所知 此错误不会中断程序 它只是添加不需要的警报 使我的打印件难以阅读 Chrome 版本 75 0 3770 100 官方版本 64 位
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • 这种 JavaScript 编码风格有什么问题? (闭包与原型)

    我们一直在讨论如何最好地处理我们的 JS 应用程序中的对象 研究 Stoyan Stefanov 的书 阅读无数关于 新 这个 原型 闭包等的 SO 帖子 事实上有很多 而且它们有这么多相互竞争的理论 表明没有完全明显的答案 让我们假设我们
  • 在overlayImage中应用滤镜的方法在哪里?

    我想在overlayImage中应用一个过滤器 唯一的方法是在渲染后在整个画布上应用过滤器 对此没有内置支持 但很容易 破解 var overlayImageUrl load overlay image first fabric Image
  • Nextjs 无法在生产环境中的“.next”目录中找到有效的构建

    我正在 docker 中运行我的应用程序 但我的生产构建和启动脚本仅在 docker 环境中失败 虽然node env开发在docker环境下运行良好 这是我的脚本 无法进行生产构建并启动服务器 我正在使用nodemon和babel bui
  • Javascript 中的线性回归 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在网络浏览器中用 Javascript 进行最小二乘拟合 目前 用户使用 HTML 文本输入输入数
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • 如何按字母顺序排序并先小写排序

    如何获得以下排序的结果Food to Eat然后是 食物123 显然 第二个较低的 o 应该将 要吃的食物 带到排序后的第一个项目中 我很惊讶这个问题不容易通过谷歌找到答案 这个壮举没有包含在 javascript 标准中也让我感到惊讶 F
  • WooCommerce 使用 AJAX 设置购物车数量?

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p
  • 使用 nginx 在云上部署 django 和 React

    我有一个 digitalocean 服务器 并且已经使用 Gunicorn 和 nginx 部署了 Django 后端服务器 如何在同一台服务器上部署 React 应用程序 您可以构建 React 应用程序并使用 Nginx 提供其静态文件

随机推荐