解决 ant-design 输入框显示历史输入记录的问题

小泡泡c

已于 2022-09-29 08:55:10 修改

阅读量4.2k

点赞数 3

分类专栏： Ant Design 文章标签：前端 vue.js

于 2022-01-26 09:13:21 首次发布

本文链接：https://blog.csdn.net/qq_45325810/article/details/122695417

版权

Ant Design 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1. 问题说明

input 组件存在历史输入记录，见下图。
在这里插入图片描述

2. 解决办法

给 Form 表单添加 autocomplete = "off"

< a-form-model  ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" autocomplete = "off" >

3. 解释说明

ant-design 中的 Form 表单默认开启自动补全功能，每次提交表单会记录输入历史。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小泡泡c

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
11
评论
解决 ant-design 输入框显示历史输入记录的问题

解决 ant-design 输入框显示历史输入记录的问题
复制链接

扫一扫

专栏目录

Element输入框带历史查询记录的实现示例

12-10

需求描述页面的查询框增加一下显示历史查找记录实现及踩坑记录使用Element带输入建议的输入框来实现此需求。用法详见官网 1. 坑1：不能直接在querySearch里返回数组，一定要调用回调函数cb来处理数据看了一下例子，建议列表应该是个数组，然后我就在querySearch里直接返回了一个数组： querySearch(queryString, cb) { return JSON.parse(localStorage.getItem('srcOrderNoArr')) }, 但是回到网页上却发现列表数据加载不出来正确姿势： /** * 建议列表 */ quer

ant-design-vue.zip

12-13

Ant Design Vue遵循Ant Design的设计规范，提供了包括表格、按钮、输入框、布局、通知、模态框等在内的各种组件。这些组件在样式和交互上保持一致，有助于创建出专业且美观的用户界面。同时，Ant Design Vue还支持...

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

Antd input禁止点击Input输入框出现以前输入过的记录

hyupeng1006的博客

02-06

541

autoComplete="off"

解决antd modal+Form 一起用，第二次打开会显示上次输入数据的问题

最新发布

vivisol的博客

07-11

239

在antd中使用包裹时, 第二次打开会自动带入上一次输入的内容。

ant-design Input 组件取消自动显示输入历史

chenlincc的博客

04-24

7060

Form默认开启 aotuComplete 功能，当submit 时会记录输入历史，取消自动补充功能，只需在Form 上加autoComplete=“off”即可关闭自动提示输入历史 <Form autoComplete = "off"> <Form.Item > {getFieldDecorator('value')( <Input/> ) ...

input 显示历史记录

蚁族的奋斗的博客

12-13

2912

<form action="http://ap/Login" method="post"> <input type="text" name="name"> <input type="text" name="age"> <input type="text" name="age1"> ...

antd Input鼠标悬浮时显示已输入内容

一小只虎的博客

01-14

2367

antd Input悬浮显示已输入内容

ant-design中Input输入框在获取焦点时由于保留了上次输入内容而莫名出现了一个黑色背景的选择提示框，且选择提示框中的值后还会出现蓝色背景

Yukinoshita_kino的博客

08-23

5451

ant-design中Input输入框在获取焦点时由于保留了上次输入内容而莫名出现了一个黑色背景的选择提示框，且选择提示框中的值后还会出现蓝色背景。

ant-design-vue 实现表格内部字段验证功能

10-15

在使用ant-design-vue开发web应用时，经常需要在表格组件中对数据进行输入和编辑。为了确保数据的准确性，对输入字段进行验证是必不可少的环节。在本文中，我们将探讨如何在ant-design-vue中实现表格内部字段的验证...

基于vue Ant-Design 的表单设计器.zip

12-26

这个工具结合了Vue.js的响应式特性和Ant Design的优美UI组件库，为开发人员提供了一种高效、灵活的表单设计解决方案。 Vue.js是一个轻量级的前端JavaScript框架，以其简洁的API和易于上手的特点深受开发者喜爱。它...

ant-design-demos

02-03

1. **Ant Design组件**：每个示例都会涉及到Ant Design的一个或多个组件，例如Button（按钮）、Input（输入框）、Form（表单）、Table（表格）、Layout（布局）、Dropdown（下拉菜单）、Badge（徽标）、Popover...

ant-design-vue-jeecg.rar

11-16

"ant-design-vue-jeecg.rar" 是一个与前端开发相关的压缩包，它涉及到的技术栈主要是 Vue.js 和 Ant Design Vue。Vue.js 是一个流行的、轻量级的前端JavaScript框架，用于构建用户界面，而Ant Design Vue是阿里巴巴...

Antd中表单的Input组件输入框清除历史输入记录

m0_68541333的博客

08-09

1215

利用input的属性。

Vue中切换了类型，发现input依然是显示之前输入的内容

小怪獸丶的糖的专栏

04-17

1578

vue示例，点击切换登录类型后界面显示不同的模块 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <span v-if="isUser"> <label for="userNmae">用户账号&lt

解决Chrome(谷歌浏览器) input框总是有输入记录的问题，尤其是日期框，输入记录都挡住日期弹框了。

qq_42237698的博客

04-12

8775

1、使用快捷键Ctrl+Shift+Del进入清除浏览器数据界面，然后勾选自动填充表单数据选项，便可解决。

antd input去除历史记录

weixin_41544124的博客

07-05

3689

一、ant-design Input 组件取消自动显示输入历史 Form默认开启 aotuComplete 功能，当submit 时会记录输入历史，取消自动补充功能，只需在Form 上加autoComplete=“off”即可关闭自动提示输入历史 (这里的Complete的C需要大写) <Input placeholder="请输入验证码" autoComplete="off"/> 如果是原生 js 的 input 框则增加属性: autocomplete=“off” (这里的complet

antd Modal弹窗中Select下拉框，Input输入历史框等跟随底层滚动与输入框分离

WANGHONGP的博客

08-31

1619

antd Modal弹窗中Select下拉框，Input输入历史框等跟随底层滚动与表单域分离位置错乱如果在弹窗中嵌套了包含下拉框的表单，很有可能会遇到滚动时下拉框跟随的不是弹窗这一层，而是底层，会导致位置错乱。如果是Select，只需要添加一个属性：getPopupContainer={triggerNode => triggerNode.parentNode} <Select getPopupContainer={triggerNode => triggerNode.paren

Vue 实现输入框新增搜索历史记录功能

a432qbc的博客

08-25

1925

参考链接：https://www.jb51.net/article/171994.htm 插件：npm install good-storage -S 在本地新建cache.js文件,该文件是关于本地存储的逻辑处理(缓存到本地的数据最大缓存15条，并且新的插入在第一位，首先得到当前的存储数据情况，将关键字存到数组中，判断如果数组中有相同的数据，则把重复的数据删除，将新的关键字存入到前面) cache.js /*把搜索的结果保存下来*/ /*用export把方法暴露出来*/ /*定义存储搜索的key _s

ant-design-vue输入时模糊提示功能

05-17

ant-design-vue提供了一个AutoComplete组件，可以实现输入时的模糊提示功能。首先，你需要在组件中引入AutoComplete： ```html <template> <a-auto-complete :options="options" v-model="value" placeholder="请输入关键字"></a-auto-complete> </template> <script> import { AutoComplete } from 'ant-design-vue'; export default { components: { AutoComplete, }, data() { return { options: [...], value: '', }; }, }; </script> ``` 其中，options是一个包含所有可供提示的选项的数组，value是输入框的值。接下来，你需要在options数组中定义所有可供提示的选项： ```javascript [ { value: 'Apple' }, { value: 'Banana' }, { value: 'Cherry' }, { value: 'Durian' }, { value: 'Eggfruit' }, { value: 'Fig' }, ] ``` 这里只定义了value属性，实际上，你可以定义任意的属性。最后，你需要在AutoComplete组件中使用filter-option属性指定如何过滤选项： ```html <a-auto-complete :options="options" v-model="value" placeholder="请输入关键字" :filter-option="filterOption"></a-auto-complete> ``` ```javascript export default { // ... methods: { filterOption(inputValue, option) { return option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1; }, }, }; ``` filterOption方法用于判断每个选项是否应该被显示。它接受两个参数：inputValue是输入框中的值，option是当前需要判断的选项。在上面的例子中，我们根据选项的value属性进行了大小写不敏感的匹配，只要选项的value包含输入框中的值，就返回true。这样，你就可以实现输入时的模糊提示功能了。