浏览器自动填充

news2025/2/24 17:24:26

input同时有多个
当input框的类型为type='password',其上一个框为type='text',浏览器会自动填充保存过的账户密码、解决自动填充有以下几种处理方法:


1、在浏览器端设置



2、给出一组假页面存储,必须在同一个Form表单中,让填充在无用的输入框中不在页面中显示
      <FormItem label="用户名:" prop="account" v-display=''none'>
        <Input
          @on-focus="focusHandler"
          type="tel"
          v-width="300"
          v-model="loginInfo.account"
          autocomplete="off"
          placeholder="请输入用户名"
        ></Input>
      </FormItem>
      <FormItem label="密码:" prop="password">
        <Input
          type="password"
          autocomplete="off"
          v-width="300"
          v-model="loginInfo.password"
          maxlength="20"
          placeholder="请输入密码"
        ></Input>
      </FormItem>


      <FormItem label="用户名:" prop="account"  v-display=''none'>
        <Input
          @on-focus="focusHandler"
          type="tel"
          v-width="300"
          v-model="loginInfo.account"
          autocomplete="off"
          placeholder="请输入用户名"
        ></Input>
      </FormItem>
      <FormItem label="密码:" prop="password">
        <Input
          type="password"
          autocomplete="off"
          v-width="300"
          v-model="loginInfo.password"
          maxlength="20"
          placeholder="请输入密码"
        ></Input>
      </FormItem>

3、改变password框上一个框的类型,聚焦时再改回text

<FormItem label="用户名:" prop="account" v-display=''none'>
        <Input
          @on-focus="focusHandler"
          type="tel"
          v-width="300"
          v-model="loginInfo.account"
          autocomplete="off"
          placeholder="请输入用户名"
        ></Input>
</FormItem>

const focusHandler = (e) => {

  e.target.type = 'text'

}

 4、给text和password之间再增加一个表单标签,浮动出页面之外

      <FormItem label="其他:" style="position: absolute; top: 999999px">

        <Input type="date" v-model="loginInfo.other"></Input>

      </FormItem>

 如果以上办法都不成功,还有最后一种办法

结合 2 和 4,添加一组数据,将此区块范围设为最小,透明度为0,放置在不起眼的角落,就可以成功带走浏览器回显的数据信息

        style="

          position: absolute;

          background-color: red;

          display: flex;

          top: 10px;

          opacity: 0;

        "

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1465697.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

解决SpringAMQP工作队列模型程序报错:WARN 48068:Failed to declare queue: simple.queue

这里写目录标题 1.运行环境2.报错信息3.解决方案4.查看解决之后的效果 1.运行环境 使用docker运行了RabbitMQ的服务器&#xff1a; 在idea中导入springAMQP的jar包&#xff0c;分别编写了子模块生产者publisher&#xff0c;消费者consumer&#xff1a; 1.在publisher中运行测试…

[AI]部署安装有道QanyThing

前提条件&#xff1a; 1、win10系统更新到最新的版本&#xff0c;系统版本最好为专业版本 winver 查看系统版本&#xff0c;内部版本要大于19045 2、CPU开启虚拟化 3、开启虚拟化功能&#xff0c;1、2、3每步完成后均需要重启电脑&#xff1b; 注&#xff1a;windows 虚拟…

农业四情在线监测站的应用

TH-Q3农业四情在线监测站可广泛应用于农田管理、作物种植、病虫害防治、气象灾害预警等领域。通过实时监测和数据分析&#xff0c;该系统可以帮助农民实现精准施肥、科学灌溉、合理调控作物生长等目标&#xff0c;提高农业生产效率和质量。同时&#xff0c;该系统还可以为政府决…

Pytorch学习(杂知识)

Mini-batch Mii-batch是一种在机器学习中常用的训练算法。它是将大的数据集分成一些小的数据集&#xff0c;每次只用一个小的数据集来训练模型。通常情况下&#xff0c;训练数据集中的数据越多&#xff0c;训练出的模型越准确&#xff0c;但是如果数据集太大&#xff0c;就会导…

【OpenFeign常用配置】

OpenFeign常用配置 快速入门&#xff1a;1、引入依赖2、启用OpenFeign 实践1、引入依赖2、开启连接池功能3、模块划分4、日志5、重试 快速入门&#xff1a; OpenFeign是一个声明式的http客户端&#xff0c;是spring cloud在eureka公司开源的feign基础上改造而来。其作用及时基于…

红日靶场3

靶场链接&#xff1a;漏洞详情 在虚拟机的网络编辑器中添加两个仅主机网卡 信息搜集 端口扫描 外网机处于网端192.168.1.0/24中&#xff0c;扫描外网IP端口&#xff0c;开放了80 22 3306端口 80端口http服务&#xff0c;可以尝试登录网页 3306端口mysql服务&#xff0c;可…

Megalinter 初体验

简介 MegaLinter 是一个多语言、多工具的集成代码检查工具&#xff0c;它能够通过一个统一的工作流来运行多个静态代码分析工具&#xff0c;从而提供全面的代码质量检查。 官网&#xff1a;https://megalinter.io/latest/ MegaLinter 的特点&#xff1a; 多语言支持&#x…

精品基于Spring Boot智能无人仓库管理-进销存储

《[含文档PPT源码等]精品基于Spring Boot智能无人仓库管理[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&#xff1a;HTML5…

统计图玫瑰图绘制方法

统计图玫瑰图绘制方法 常用的统计图有条形图、柱形图、折线图、曲线图、饼图、环形图、扇形图。 前几类图比较容易绘制&#xff0c;饼图环形图绘制较难。 还有一种玫瑰图的绘制也较难&#xff0c;今提供玫瑰图的绘制方法供参考。 本方法采用C语言的最基本功能&#xff1a; &am…

ESP8266智能家居(1)——开发环境的搭建

1.前期介绍 本次打算使用esp8266的开发板——NodeMCU&#xff0c;进行物联网相关项目的学习。开发环境使用Arduino软件。 NodeMCU实物图为&#xff1a; 开发环境截图为&#xff1a; 2.软件下载 我使用的arduino版本为1.8.5&#xff0c;其安装包如下&#xff1a; 【免费】ar…

【鸿蒙 HarmonyOS 4.0】路由router

一、介绍 页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块&#xff0c;通过不同的url地址&#xff0c;可以方便地进行页面路由&#xff0c;轻松地访问不同的页面。 二、页面跳转 2.1、两种跳转模式&#xff1a; router.pushUrl()&…

浅谈兼容性测试的概念及目的

兼容性测试是软件测试中的一项重要工作&#xff0c;旨在验证系统在不同环境、不同设备和不同浏览器下的正常运行和稳定性。 1. 兼容性测试的概念 兼容性测试是指在多样化的硬件、操作系统、浏览器、网络环境等条件下&#xff0c;验证软件或应用程序的稳定性和一致性。这种测试是…

电商+支付双系统项目------电商系统中收货模块的开发

本篇文章是讲关于项目的收货地址模块的设计。这个就比较简单了&#xff0c;我就不像之前的文章讲的那么详细了&#xff0c;就简单讲讲就好。 首先先设计 DAO 层&#xff1a; package com.imooc.mall.dao;import com.imooc.mall.pojo.Shipping; import org.apache.ibatis.annot…

Linux-基础知识(黑马学习笔记)

硬件和软件 我们所熟知的计算机是由&#xff1a;硬件和软件组成。 硬件&#xff1a;计算机系统中电子&#xff0c;机械和光电元件等组成的各种物理装置的总称。 软件&#xff1a;是用户和计算机硬件之间的接口和桥梁&#xff0c;用户通过软件与计算机进行交流。 而操作系统…

研发流程图

1、需求评审流程 2、用例评审流程 3、代码评审流程 4、产品功能上线流程

信号通信与消息队列实现的通信:2024/2/23

作业1&#xff1a;将信号和消息队列的课堂代码敲一遍 1.1 信号 1.1.1 信号默认、捕获、忽略处理(普通信号) 代码&#xff1a; #include <myhead.h> void handler(int signo) {if(signoSIGINT){printf("用户键入 ctrlc\n");} } int main(int argc, const ch…

WebDriver-自动化测试利器剖析

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

C++——STL之map和set

C——STL之map和set &#x1f3d0;序列式容器和关联式容器&#x1f3c0;什么是键值对 &#x1f3d0;什么是set&#x1f3c0;erase&#x1f3c0;count&#x1f3c0;lower_bound&&upper_bound&#x1f3c0;equal_range &#x1f3d0;multipleset&#x1f3d0;什么是map&a…

【办公类-16-10-01】“2023下学期 中4班 自主游戏观察记录(python 排班表系列)

背景需求 上学期的周安排里&#xff0c;每班每周的自主游戏会轮到多个不同的内容 因此在每周的自主游戏观察有2次记录&#xff0c;观察的项目可以写不一样的&#xff0c; 如一位老师写沙水游戏&#xff0c;另一位写表演游戏 本学期&#xff0c;中班的自主游戏全部是户外的&am…

[算法沉淀记录] 排序算法 —— 归并排序

排序算法 —— 归并排序 算法介绍 归并排序是一种分治算法&#xff0c;由约翰冯诺伊曼在1945年发明。它的工作原理是将未排序的列表划分为n个子列表&#xff0c;每个子列表包含一个元素(包含一个元素的列表被认为是有序的)&#xff0c;然后重复合并子列表以生成新的有序子列表…