如何不让input输入框显示或禁止历史记录

点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群

html的input框获取光标后,会提示原来输入过的内容,还会出现下拉的历史记录,有时候项目中完全不需要这个,大家基本禁止这种情况,基本都是在input中加入:autocomplete="off"

 
 
<input type="text"  autocomplete="off" />

但我今天无意中发现一种情况:

像下面这种的,本身是不会有历史记录出现的。

 
 
<input type="text" id="myinput"  class="search-input" placeholder="在这里输入查询关键字" />

但是如果我把id改一下,像下面这个样子就会出现历史记录。

 
 
<input type="text" id="keyword"  class="search-input" placeholder="在这里输入查询关键字" />


<input type="text" id="keywords"  class="search-input" placeholder="在这里输入查询关键字" />

感兴趣的同学可以自己试试看,id="keyword"会出现历史记录,id="keywords"会提示“在这里搜索”。

也就是说其实也跟id的关键字有关系,如果input输入框没有设置id,压根也不会弹出历史记录,如果设置了id,不是keyword也不会出现,如果id非设置了keyword那就加个autocomplete="off"禁止。

5c171a1553aafb7cfb99e02d188a4d7c.png

往期推荐

2021 TWeb 腾讯前端技术大会精彩回顾(附PPT)

2388e26045ed5a599e953ebbe142615c.png

面试题:说说事件循环机制(满分答案来了)

cf77865a130635bf67f6bc4cd9efa1ad.png

专心工作只想搞钱的前端女程序员的2020

a1169720776ce0cab1b8622170703d51.png


最后

  • 欢迎加我微信,拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

a33e659dc2824d8f3aa2be4d700ad29f.png

14e40ce6f1f0ec48cbec172c4c5077ea.png

点个在看支持我吧

14ba1f47834f74e356171bcda1cc2298.gif

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值