取消浏览器自动补全文本框与密码框行为？

超级无敌小小小白

已于 2023-09-18 15:33:48 修改

阅读量320

点赞数 3

分类专栏： HTML 文章标签： html 前端

于 2023-04-14 14:37:38 首次发布

本文链接：https://blog.csdn.net/SM_Cute/article/details/130152687

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近在搞一个拖拽组件生成表单的功能，其中单行文本组件和密码框只要拖拽到一块儿，浏览器就自动填充为我登录时候的账号与密码了，测试同事就说这是bug，那就改吧。

在element-ui中有这么一个属性：【Element - The world's most popular Vue UI framework】

在单行文本中加入 “autocomplete: 'off'”，密码框中加入“autocomplete: 'new-password'”即可阻止浏览器自动补全文本框与密码框行为。

<!--文本框-->
<input type="text" autocomplete="off"/>

<!--密码框-->
<input type="password" autocomplete="new-password"/>

只用两个配合一起使用，才能阻止浏览器自动补全。

前端小白积累经验篇~~

优惠劵

超级无敌小小小白

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
取消浏览器自动补全文本框与密码框行为？

取消浏览器自动补全文本框与密码框行为？
复制链接

扫一扫

专栏目录

Visual Basic 2010入门经典.part1.rar

09-26

7.2.5 创建密码框 120 7.2.6 理解文本框的常用事件 121 7.3 创建按钮 121 7.3.1 接受按钮和取消按钮 122 7.3.2 使用复选框提供是/否选项 123 7.4 创建容器和单选按钮组 124 7.4.1 使用面板和分组框 124 ...

Element-UI之＜el-autocomplete＞标签在输入框输入匹配不到下拉列表中内容

weixin_44839328的博客

02-03

2335

功能需求：查到另一张表的“姓名”字段，在输入框下有下拉框可以输入，自动匹配下拉列表中的字段鼠标点击在输入框，下拉列表出现实现使用Element-UI前端模板，< el-autocomplete> 之 “自定义模板” 标签复制到代码中后，在输入框输入 “三” 之后，下拉列表中不能匹配到下拉框中字段解决过滤方法中,这里是=== 0，indexOf（）方法是返回包含的位置，并不是存在===0，不存在===-1 restaurant.crewName.indexOf(que

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

element el-autocomplete数据不显示问题

jam476的专栏

01-29

3430

element el-autocomplete数据不显示问题

前端开发之Element树结构组件el-input的type=“password“时候账号密码自动填充解决方案

最新发布

m0_50207524的博客

04-07

438

在使用element的input的password当参数和login的参数相同时，在浏览器保存的用户名密码会自动填充，导致input附加上默认值使用场景一般是在用户管理创建新的用户的时候会遇到。

解决element ui 密码框自动填写问题

m0_61447532的博客

12-29

1593

两个方案 1. 在 el-input中添加 autocomplete= "new-password" // 可能在火狐浏览器或低版本谷歌中失效 2. 在el-input 的上方添加一个html inpue元素，原因是浏览器会自动找到type为password，且有name值的input并进行自动填写，这里在需要的密码框前再写一个密码框隐藏或者定位到视图外用来接收浏览器的自动补全 <input name="a" style="display: none;" type="password" pl.

element 自动搜索 el-autocomplete，不显示结果

扮老虎的猪

09-03

2835

代码： <el-autocomplete style="width: 58%;" v-model="search_text" value-key="address" :fetch-suggestions="search" :trigger-on-focus="false" placeholder="请输入内容" size="small" ></el-autocomplete&

ElementUi el-autocomplete 踩坑（使用clearable清除,点击输入框下拉条件不再显示）

weixin_42190844的博客

10-14

9211

今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了查了一下，是因为有element-ui源码有bug，主要原因是参考该博客 autocomplete组件在执行清除事件时，将activated置为false。这时候下拉框不会显示了，而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心.

vue-tabel 中使用 el-autocomplete 出现的问题

m0_61382303的博客

09-12

844

我自己用的话缺一不可说一下我自己项目中遇到的问题吧，我写的是表格中套表格，会出现就是当下拉选的时候用@selete是可以用的，但是用@blur也可以触发，但是仅限于失去焦点点在表格内才会触发，在其他地方是不会触发的我查了一下原因是冲突了在二级表格的时候我就只用了@change 方法但是这还里面还有一个bug 就是输入的时候后面会有一个小删除按钮，当我点击删除的时候，@change事件传的值不是为空，而是修改之前的值索性我就不用× 直接把他disaplay ：none 了。

解决elementUI的el-input密码框自动填充禁用失败解决方案

ta_huang的博客

09-14

4582

在el-input中设置属性autocomplete=”off",普通文本可以生效，但是密码框点击后还是会提示用户信息，由于用户信息提示只跟input有关，因此，我们可以通过监听input的行为来,不然其显示，根据测试，在鼠标按下的时候，就会展示用户信息自动填充框供选择，因此，监听的事件要在按下鼠标的时候，即。事件,在input获得焦点时，先失去焦点，就不会提示用户信息，然后再通过js代码去获取焦点，此时不会触发用户信息框。禁用登录的时候提示用户信息，即不允许保存账号密码。

去除浏览器自动填充账号密码功能简单并100%有效

一个网络搬砖的斜杠青年

07-21

787

他是根据input标签的type属性进行算法计算，满足条件会自带上次输入过的账号密码（目测：type="text"后紧接着type=“password”）的极容易出现填充。先在页面不使用type=“password”，欺骗浏览器我没有使用密码框。当我实际输入密码时，获取焦点（focus）把自身input的type属性再改成“password” ------ “告诉浏览器，我不是密码框”保守点：把前面的账号也改一下，欺骗浏览器说：“我不是账号框”// 长得样式跟text一样。

解决 Element的el-input 密码输入框浏览器自动填充账号密码问题

潮汐未见潮落的博客

09-02

7004

解决 Element的el-input 密码输入框浏览器自动填充账号密码问题

vue3 elementPlus 解决密码框自动填充问题

HurryUpp的博客

07-31

1417

【代码】vue3 elementPlus 解决密码框自动填充问题。

Visual Basic 2010入门经典.part2.rar

09-26

javaSE代码实例

06-21

第3章　表达式——描述行为的元素　22 3.1　不简单的算术运算符　22 3.1.1　“+”运算符　22 3.1.2　“-”运算符　24 3.1.3　“*”运算符　25 3.1.4　“/”运算符　25 3.1.5　“%”运算符　26 3.2　自增自减运算　27...

vue 解决浏览器自动回填输入框问题

x_nweBorder01k的博客

04-08

2949

使用个别浏览器加载页面时，有些输入框会受浏览器自动记住密码影响，自动回填信息，解决：先把输入框设置为只读状态，当获取焦点时再取消这一属性。加： readonly onfocus="this.removeAttribute('readonly');" 例如： <el-input size="mini" placeholder="" readonly onfocus="this.removeAttribute('readonly');" v-model="formPass.testUserC

elementui ：密码表单回写问题

lyx9611的博客

07-09

573

<el-input type="password" v-model="newPass" placeholder="请输入新密码" show-password @blur="passWordBlurFun" @focus="passwordTips=true"></el-input> 谷歌浏览器总是会把登陆时保存的账号密码回写到其他输入框中。今天找到了解决方法：第一种测试有效。 auto-complete 下个主版本弃用 string on, off off 属性是

python ui自动化测试框架浏览器最大化代码

09-26

### 回答1：在 Python 的 Selenium 框架中，你可以使用 `maximize_window()` 方法来最大化浏览器窗口。下面是一个示例代码： ```python from selenium import webdriver # 创建一个浏览器对象 driver = webdriver.Chrome() # 最大化浏览器窗口 driver.maximize_window() # 打开网页 driver.get("https://www.example.com") ``` 在这里，我们首先导入了 Selenium 的 webdriver 包，然后使用它来创建一个 Chrome 浏览器对象，接着使用 `maximize_window()` 方法来最大化浏览器窗口，最后使用 `get()` 方法来打开一个网页。 ### 回答2：要实现Python UI自动化测试框架中浏览器最大化的代码，可以使用selenium库和WebDriver API来操作浏览器。首先，需要安装selenium库。可以使用pip命令进行安装：pip install selenium。然后，导入selenium库和WebDriver模块： ```python from selenium import webdriver from selenium.webdriver.chrome.options import Options ``` 接着，创建一个WebDriver实例，指定浏览器类型和浏览器选项： ```python chrome_options = Options() chrome_options.add_argument("--start-maximized") driver = webdriver.Chrome(options=chrome_options) ``` 这里以Chrome浏览器为例，chrome_options.add_argument("--start-maximized")的作用是将浏览器最大化。最后，使用WebDriver实例进行其他UI操作和测试： ```python # 打开网页 driver.get("https://www.example.com") # 执行其他UI操作和断言 element = driver.find_element_by_id("some_element_id") element.click() ``` 以上代码创建了一个启动时最大化的Chrome浏览器实例，并在实例中打开了一个示例网页。根据需要，你可以在这个基础上添加更多的代码来进行UI自动化测试的各种操作和断言。 ### 回答3：在Python的UI自动化测试框架中，我们可以使用一些代码来实现浏览器最大化。首先，我们需要安装和导入适用于UI自动化测试的Python库，如selenium。以下是一个示例代码，展示了如何使用selenium库来实现浏览器最大化： ```python from selenium import webdriver # 创建浏览器驱动对象 driver = webdriver.Chrome() # 最大化浏览器窗口 driver.maximize_window() # 打开网页 driver.get("https://www.example.com") # 其他测试代码... ``` 上述代码中，我们首先导入了selenium库并创建了一个浏览器驱动对象（这里使用的是Chrome浏览器驱动）。然后，通过`maximize_window()`方法来最大化浏览器窗口。接下来，使用`get()`方法打开了一个网页（此处以"https://www.example.com"为例），然后可以继续编写其他的自动化测试代码。使用上述代码，我们可以在执行UI自动化测试期间将浏览器窗口最大化，以便更好地查看页面布局、元素定位等相关测试操作。这使得测试人员能够更方便地与页面进行交互，并确保测试步骤和结果的可视性。当然，这只是一个简单的示例，实际应用中可能需要根据具体情况和需求对代码进行调整和优化。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交