input chrome中input自带黄色填充bug

最新推荐文章于 2021-01-13 14:11:12 发布

转载最新推荐文章于 2021-01-13 14:11:12 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vhen/p/9076289.html

本文深入探讨了信息技术领域的最新趋势，涵盖了从前端到后端，从移动开发到游戏开发等多个方面，提供了丰富的技术细节和实用案例，是了解当前IT行业不可或缺的资料。

转载于:https://www.cnblogs.com/vhen/p/9076289.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dbs5592

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

浏览器表单自动填充问题【兼容性解决方案】

一只彩乌鸦

06-21

2214

stackoverflow: chrome-ignores-autocomplete-off更多参考该问题是关于Chrome浏览器自动填充的功能，Chrome团队对此给出了他们的立场-https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164简单来说，有两种情况——【案例1】：你的类型不是。在这种情况下，解决方案很简单，分为三个步骤。将属性添加到不应以电子邮箱或用户名之类的值开头，否则Chrome任然会显示下拉列表。例如，显示下拉菜单，

input标签在谷歌浏览器记住密码下的一个自动填充BUG

AmberWu

03-13

6261

之前优快云的编译器有问题，所以这里重新整理给大家。 bug已经在之前的文章里叙述得很清楚了，现在只整理下bug的解决方案。例如我们有一个id为demoinput标签，我们暂且叫他”1号input” <input type="text" class="demo" id="demo"> 在“1号input”的上面加一个“2号input”，并给“2号input”加一个disp...

参与评论您还未登录，请先登录后发表或查看评论

Chrome浏览器返回上一页填充文本框Bug

lu322313的博客

07-12

594

先附上代码 <html> <body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script > $(function () { $("#test2").before('first input:<input t...

Chrome浏览器密码框自动填充的bug

u010705091的专栏

03-27

1760

在系统开发过程中，有一个难啃的bug从入职以来都在debug，一直以为是下拉框控件导致的问题。所以这个问题一直就搁浅了。今儿bug重提，就一步步找原因，排除了下拉控件select2的原因，才发现是在Chrome浏览器的默认填充密码框的问题导致的。为了解决Chrome浏览器密码框自动填充的问题，经过查找资料，此问题已经解决了，就是在原有的input标签前面再加个input标签，并给此input标

去掉Chrome自动填充表单浅黄色背景色

soindy

01-10

1507

前言今天玩推时看到Chrome自动填充表单一个安全性问题,瞬间勾起我对其另一个显示问题的不满,忍不住小吐槽一下. 问题Chrome自动填充表单(记住用户名或密码)时,input会出现黄色的背景.如下图所示: 原因这是一个历史悠久的 question ? bug : design.一直从10年持续到现在.如果你看一下Google的bug列表 a known bug in Chrome, 内心一定

谷歌浏览器页面中input禁止自动填充

好巧~我看到你了

05-29

3639

平时使用的谷歌浏览器中，在登录页面是喜欢记住密码，方便调试，可是在添加页面或者修改页面时，头疼的事情就发生了，啊，谷歌浏览器会自动赋值，就很头痛只需一步加上autocomplete=“new-password” 比如  <input type="text" name="p...

input输入框浏览器自动补全密码BUG解决

front_endxiaobaia的博客

01-13

415

input输入框浏览器自动补全密码BUG解决看了网上一些教程，大多数都是autocomplete=“off”，实测无效。谷歌浏览器下autocomplete="new-password"是可以解决的

Chrome浏览器自动填充<input>标签的密码

weixin_30642561的博客

03-20

180

问题：登录页面登录时，Chrome浏览器保存了用户名和密码，在其他页面管理其他的账户和密码时，密码框先是显示正确的密码，然后一闪而过被覆盖。原因：问了技术主管才得知，Chrome浏览器中的，保存用户和密码功能导致这个问题，其他浏览器没发生跟这个问题。并且关闭了这个功能后，还是被覆盖，所以觉得是Chrome的一个bug 解决：若要解决这个问题，登录时别让Chrome记住账户和密码，并...

Chrome 浏览器input输入框值为空时会自动填充记录的账号密码

我是纯豆腐的博客

10-13

1750

偶尔遇到的BUG，算是浏览器的一个BUG，但是我们改不了浏览器啊，只能自己代码去处理了，这点感觉chrome有点恶心。网页中的表单，chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性就会变成： input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; } 1、纯色背景（添加内阴影） in..

谷歌禁止input自动填充表单信息

weixin_30270889的博客

08-09

188

谷歌浏览器的默认保存表单信息之后自动填写的bug，其原理是根据第一个type=‘password’的input框自动填充，如下图第三个框是 password框,则2,3项会自动填充保存的登录的用户名和密码，如果第四项是第一个type=‘password’的密码框则第三四项自动填写。解决办法就是第一个password框的时候将其设置为readonly=‘true’ 获取焦点的onfocus的...

解决浏览器会自动填充密码的问题

12-11

解决办法是在form上或input上添加autoComplete=”off”这个属性。 form表单的属性如下所示：但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决。 1.’autocomplete=”off”‘在Chrome中不起作用解决方案 ...

Firefox中autocomplete="off" 设置不起作用Bug的解决方法

09-05

在网页开发中，为了提供更好的用户体验，经常会在输入框元素（`<input>`）上使用`autocomplete`属性来控制浏览器的自动填充功能。这个属性允许开发者开启或关闭表单字段的自动完成，例如搜索框的建议提示。然而，...

STM32+MAX7219数码管模块显示程序 SPI接口

12-02

提供了基于STM32F4xx系列的MAX7219数码管模块显示程序，通过SPI串行总线进行通信，使用库函数进行编程。经过实际测试，该程序能够正常驱动数码管进行显示。特点基于STM32F4xx系列MCU 使用SPI串行总线通信采用库函数编程实测能正常驱动MAX7219数码管模块显示

基于大疆M100无人机平台的自主导航与智能决策系统开发项目_该项目专注于在复杂动态环境中实现无人机的实时障碍物感知与规避以及高效全局与局部路径规划算法的集成与优化核心内容包括利.zip

12-02

Turbo 码编码及解码仿真程序(Matlab)

12-02

Turbo 码编码及解码仿真程序(Matlab)

【改进灰狼算法】基于记忆、进化算子和局部搜索的改进灰狼优化算法及线性种群规模缩减算法（Matlab代码实现）

最新发布

12-02

内容概要：本文提出了一种基于记忆机制、进化算子和局部搜索策略的改进灰狼优化算法，并结合线性种群规模缩减策略以提升算法收敛速度与全局搜索能力。该算法通过引入记忆模块保存优质个体信息，利用进化算子增强种群多样性，同时采用局部搜索机制提高寻优精度，有效克服了传统灰狼算法易陷入局部最优、收敛速度慢等问题。文中详细阐述了算法的设计思路、实现步骤及关键参数设置，并提供了完整的Matlab代码实现，便于读者复现与应用。实验部分验证了改进算法在多个标准测试函数上的优越性能，展示了其在优化问题中的潜力。; 适合人群：具备一定智能优化算法基础，熟悉Matlab编程，从事科研或工【改进灰狼算法】基于记忆、进化算子和局部搜索的改进灰狼优化算法及线性种群规模缩减算法（Matlab代码实现）程优化相关工作的研究生、科研人员及技术人员；使用场景及目标：①解决复杂优化问题如函数优化、参数调优、工程设计优化等；②学习灰狼算法的改进思路与实现方法，掌握智能算法的性能提升策略；阅读建议：建议结合Matlab代码逐行理解算法实现过程，重点关注记忆机制、进化操作与局部搜索的融合方式，并通过实验对比分析改进策略的有效性。

基于ROS的机器人运动规划与路径搜索算法实现工作空间_包含A星Dijkstra等经典与优化算法在二维三维栅格地图中的高效路径规划与避障实现结合RVIZ可视化插件进行实时路径动态障碍.zip

12-02

基于OpenStreetMap开源地理数据与OSRM高性能路由引擎的跨平台智能路径规划系统_集成多模式交通网络分析实时交通流量预测动态避障与多目标优化算法的综合性导航解决方案_.zip

12-02

这是一个针对自动驾驶与机器人路径规划领域的开源项目专注于对经典HybridA算法在ROS机器人操作系统框架下的实现代码进行详尽的中文注释与解析_项目核心是对KarlKu.zip

12-02

el-input show-password禁止浏览器显示密码提示

03-21

<think>嗯，用户想解决在使用element-ui的el-input组件时，当启用show-password属性后，浏览器自动弹出保存密码提示的问题。这个问题我之前在引用内容里看到过，应该可以通过一些属性设置来禁用浏览器的自动填充功能。首先，根据引用[1]，他们提到了通过设置auto-complete为"new-password"，以及使用readonly属性来阻止浏览器自动填充。这可能是一个有效的办法。用户可能需要将el-input的auto-complete属性设为"new-password"，这样浏览器就不会自动保存密码了。另外，设置输入框初始为只读，然后在焦点事件中取消只读，这样可以避免浏览器自动填充已有的密码信息。然后，引用[2]提到show-password属性在旧版本可能无效，需要升级element-ui到最新版本。虽然用户的问题不是属性无效，但版本问题也可能影响其他行为，所以建议用户检查版本，确保使用的是最新版，避免兼容性问题。引用[3]中的方法虽然主要是处理输入数字，但里面提到的通过事件处理来修改输入内容的方法可能对当前问题帮助不大。不过，可以考虑结合类似的事件处理，比如在焦点事件中动态改变属性，防止浏览器触发保存密码的提示。可能的解决方案步骤：首先，在el-input上添加auto-complete="new-password"，阻止自动填充。然后，设置初始的readonly属性为true，当用户点击输入框时，通过@focus事件将readonly设为false。这样，浏览器在页面加载时不会自动填充，因为输入框初始是只读的，用户需要点击后才能输入，此时解除只读状态，允许输入密码。另外，可能需要检查是否有form标签包裹，如果有的话，在form标签上设置auto-complete="off"，这样整个表单的自动填充都会被禁用，增强效果。同时，确保没有其他输入框设置为type="password"而没有处理，可能会影响整个表单的行为。测试这些方法时需要注意不同浏览器的表现，因为各浏览器对自动填充的处理可能不同。比如Chrome可能会比较积极保存密码，而Firefox可能有不同的机制。所以，可能需要多种方法结合使用，比如同时设置auto-complete和readonly属性，以及在form级别禁用自动完成。总结下来，关键步骤是设置auto-complete为"new-password"，初始只读，焦点事件解除只读，并在外层form禁用自动完成。同时，确认element-ui版本是否最新，避免已知的bug。</think>### 解决方案：禁用浏览器密码提示的两种方法 #### 方法一：通过`auto-complete`和`readonly`属性控制 1. **设置`auto-complete="new-password"`** 此属性会告知浏览器不要自动填充密码，且不触发保存密码的提示框[^1]。 2. **初始状态设为`readonly`** 通过初始化`readonly`为`true`，阻止浏览器识别密码输入框的默认行为。在用户点击输入框时，再动态关闭`readonly`。 ```html <el-form-item label="密码:"> <el-input v-model="password" type="password" show-password auto-complete="new-password" :readonly="readonlyFlag" @focus="handleFocus" ></el-input> </el-form-item> ``` ```javascript data() { return { password: '', readonlyFlag: true }; }, methods: { handleFocus() { this.readonlyFlag = false; } } ``` #### 方法二：在表单级别禁用自动填充在父级`<el-form>`标签添加`auto-complete="off"`，全局禁用表单的自动填充功能： ```html <el-form :model="formData" auto-complete="off">  </el-form> ``` #### 注意事项 - **Element-UI版本兼容性** 若`show-password`功能异常，请检查Element-UI版本是否≥2.13.0[^2]。 - **浏览器差异** Chrome可能对`auto-complete="new-password"`更敏感，而Firefox需结合`readonly`才能生效。