禁止input输入框显示历史记录(已解决)

导读:本篇文章讲解 禁止input输入框显示历史记录(已解决),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

需求

在这里插入图片描述

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

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

还有一种办法就是更改ID,像下面这种,就不会有历史记录出现的

<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,id不是keyword也不会出现,如果id非要设置了keyword那就加个autocomplete=”off”禁止。

实现效果:
在这里插入图片描述

完整代码:

 <input  ref="codeBox"  v-model="barcode"  v-autofocus type="text" class="lightInput"
       :placeholder="条码编号"  @keyup.enter="toQuery"  @keydown.tab="toQuery"
 />
export default {
  name: "scanPacking",
  directives: {
    // 指令的定义
    autofocus: {
      inserted: function (el) {
        // 获得焦点
        el.focus();
      },
    },
  },
}

样式

<style>
.lightInput {
  border: none;
  width: 98%;
  text-indent: 5px;
  background: #2b2c2c !important;
  height: 30.5px;
  color: #ffffff;
}
.lightInput:focus {
  outline: 0;
  border: 1px solid rgb(0, 112, 70);
}
.lightInput::placeholder {
  color: #ffffff;
  font-size: 12px;
}
input::input-placeholder {
  color: #ffffff;
  font-size: 12px;
}
.lightInput::-webkit-input-placeholder {
  /* //兼容WebKit browsers(Chrome的内核) */
  color: #ffffff;
  font-size: 12px;
}
.lightInput::-moz-placeholder {
  /* //Mozilla Firefox 4 to 18 */
  color: #ffffff;
  font-size: 12px;
}
.lightInput::-moz-placeholder {
  /* //Mozilla Firefox 19+ */
  color: #ffffff;
  font-size: 12px;
}
.lightInput::-ms-input-placeholder {
  /* //Internet Explorer 10+ */
  color: #ffffff;
  font-size: 12px;
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/79166.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!