禁止 input 输入框显示历史记录

最新推荐文章于 2024-04-12 15:30:55 发布

sout-lanys

最新推荐文章于 2024-04-12 15:30:55 发布

阅读量2.8k

点赞数

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

本文链接：https://blog.csdn.net/qq_44697754/article/details/131637614

版权

HTML/JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

问题概述

在 HTML 开发中会 input 标签是非常常用的，当在 input 标签输入数据后，再点击输入框会显示原来输入过的内容，还会出现下拉的历史记录。让使用人员感觉比较恶心。
在这里插入图片描述

解决方案（隐藏记录框）

隐藏记录框

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

on 默认，规定启用自动完成功能；
off 规定禁用自动完成功能；

<input type="text" name="reportStartDate" autocomplete="off" placeholder="检测开始时间"  />
<span class="input-group-addon">到</span>
<input type="text"  name="reportEndDate" autocomplete="off" placeholder="检测结束时间"  />

实现效果

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sout-lanys

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
禁止 input 输入框显示历史记录

在 HTML 开发中会 input 标签是非常常用的，当在 input 标签输入数据后，再点击输入框会显示原来输入过的内容，还会出现下拉的历史记录。让使用人员感觉比较恶心。
复制链接

扫一扫

专栏目录

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

12-10

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

input输入框的自动记忆/填充功能禁用

iUserWang

09-05

1万+

我们在使用input时，经常会出现一个小问题，就是自动填充。 **如下图，**当我们选择日期时，应出现日期选择，然而在其上方出现了一列时间数据，既影响使用又不美观。其实这是html5的一个新属性： autocomplete 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 autoc...

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

input输入框历史记录清除

wyt5206的博客

06-06

2734

在输入input时会提示原来输入过的内容，还会出现下拉的历史记录，禁止这种情况只需在input中加入： autocomplete=“off” autocomplete 属性是用来规定输入字段是否启用自动完成的功能。 1.防止退后清空的TEXT文档(可把style内容做做为类引用) 2.ENTER键可以让光标移到下一个输入框 3.只能为中文(有闪动) type：指定input类型 hideFocus / HideFocus=true：取消按钮按下时的虚线框 autofocus：规定输入字段在页面加载时是否获得

禁止input输入框显示历史记录（已解决）

蓝胖子的博客

11-30

4503

禁止input输入框显示历史记录（已解决）

input 显示历史记录

蚁族的奋斗的博客

12-13

2899

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

PHP input输入框 不记录历史关键字

m0_46251434的博客

05-26

442

yii2项目，input输入框总是会显示出历史输入记录： <input type="text" placeholder="输入关键字，回车搜索话题或点击创建新话题" id="topic"> 没有做记录、下拉处理。只要聚焦input时，就会显示这个历史记录。实际上，不想在input框聚焦时，显示这个历史记录。添加 autocomplete="off"属性即可去掉。 <input type="text" placeholder="输入关键字，回车搜索话题或点击创建新话题" id=

不让input表单的输入框保存用户输入的历史记录

Ghjkku的博客

11-28

1万+

不让input表单的输入框保存用户输入的历史记录

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

10-16

主要介绍了Vue 输入框新增搜索历史记录功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

input输入框鼠标焦点提示信息

01-19

鼠标点击到输入框（input）里的时候，输入框的提示消失，鼠标再移开，输入框提示出现。如图所示：做法如下：代码如下: <input type=”text” name=”name” id=”name” class=”ind_cont_input ind_cont_...

input输入框去除记忆搜索

weixin_48596030的博客

04-18

5786

1、input输入框去除记忆搜索（隐藏记录框） autocomplete属性规定form或input域应该拥有自动完成功能。 on 默认。规定启用自动完成功能。 off 规定禁用自动完成功能。 **设置 autocomplete='off'，**不会记录用户输过的值。（浏览器中的表单会记录刚填完的input数据，为防止用户信息泄露，可以在input中加入autocomplete=“off”，也可以在form表单中加入autocomplete，可以防止表单记录填过的表单数据，不会记录用户输过的值。）二、i

el-input如何记忆

weixin_46139110的博客

01-09

1227

el-input的记忆功能是指通过添加name属性，可以实现浏览器自动填充表单的功能。当用户在el-input中输入账号信息后，浏览器会将该账号信息保存起来，下次用户再次输入账号时，浏览器会自动填充已保存的账号信息。通过添加name属性，浏览器会将用户输入的账号信息保存起来，并在下次用户再次输入账号时自动填充。

input输入框自定义历史记录

wxm2106的博客

10-23

4637

在项目开展过程中，业主提出页面输入框自带的历史记录功能不能贴合实际使用要求，遂考虑禁用input自带的历史记录功能(autocomplete=“off”)，开发一个公用的脚本适用当前需要。需求如下： 1、历史记录按输入的时间倒序排列； 2、input输入内容变化时，自动匹配； 3、最多展示10条；实现思路： 1、input输入框获取到焦点后，自动查询相应的Cookie缓存，匹配输入内容，展示最...

去掉input历史记录

03-11

529

There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being cheated should leave quickly.

input输入框禁止显示历史记录

最新发布

JackChan

04-12

359

去掉el-input输入框弹出历史记录框

JavaScript前端：输入框关闭弹出历史记录功能

qq_46119575的博客

01-11

3743

JavaScript前端：输入框关闭弹出历史记录功能

如何去除input标签的历史记录

weixin_44541162的博客

07-08

9659

（作者：苦行者；撰写时间：2019年7月8日） 1、input标签有一个令人郁闷的缺点（针对我个人），那就是它会把你曾经填写过的数据记录下来，下次点击它的时候就会把你的那些历史记录以下拉框的形式罗列展示出来，而你根本就不需要那些记录，特别是一些随便输入的历史记录它就会自己“跑”出来，非常影响观赏性。于是我便在网上搜索有关解决这个问题的方法，最后成功地解决了这一问题。原来都是input标签自带的...

input输入框需要显示历史输入记录

zhongmei121的专栏

11-30

7095

input 设置属性 autocomplete= "on" 并且需要设置name值例如： <input name="mobile" autocomplete="on" placeholder="手机号"></input>

input 双击后不出现历史记录

http://itzones.cn

03-02

4014

做项目时，发现登录时双击文本框，以前输入的用户名还在，安全性不高 autocomplete属性可以让历史记录不显示解释： HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能，例如当用

写一个input输入框显示历史输入记录的代码

05-31

好的，以下是一个简单的实现示例： HTML代码： ``` <input id="input" type="text" placeholder="请输入内容"> <div id="history"></div> ``` JavaScript代码： ```javascript // 获取输入框和历史记录展示区域 const input = document.getElementById('input'); const history = document.getElementById('history'); // 获取本地存储中的历史记录 const historyList = JSON.parse(localStorage.getItem('historyList')) || []; // 更新历史记录展示 function updateHistory() { history.innerHTML = ''; historyList.forEach(item => { const div = document.createElement('div'); div.textContent = item; div.addEventListener('click', () => { input.value = item; }); history.appendChild(div); }); } // 监听输入框输入事件 input.addEventListener('input', () => { // 将输入框的值存储到历史记录中 const value = input.value.trim(); if (value && !historyList.includes(value)) { historyList.push(value); localStorage.setItem('historyList', JSON.stringify(historyList)); updateHistory(); } }); // 初始化历史记录展示 updateHistory(); ``` 这段代码会在用户输入内容时将其存储到本地存储中，并在历史记录展示区域中展示最近的几条历史记录。用户点击某个历史记录项时，会将该记录填充到输入框中。请注意，这只是一个简单的示例，实际场景中可能需要对存储、展示等方面进行更多的优化和处理。