禁止 input 自动弹出下拉框的方法

一个人的人生注定要遇见两个人,一个人多年令人惊叹,另一个人温柔。学校没有纪律便如磨房里没有水。走自己的路,让别人说去吧!

经常设计 form 表单的开发应该知道,用户在浏览器中向表单输入信息的时候会被 input 记录下来,以后每次双击 input 文本框时都会展示以前输入过的信息,虽然这样很方便,但会暴露用户的隐私数据。那如何禁止 input 输入框不记录用户输入的信息呢?下面就来说一下!

input 中的 autocomplete 属性

autocomplete:属性定义input是否启用自动完成功能,也就是我们说的是否记录用户数据!

autocomplete 有两个值,分别为 on 与 off.

on:启用自动完成功能,记录用户数据!

off:关闭自动完成功能,不记录用户数据!

autocomplete 属性适用于 form 标签,以及text, search, url, telephone, email, password, datepickers, range,color等类型的 input 标签!

input 中使用 autocomplete 属性

可单独对 input 的 autocomplete 属性进行设置,来定义 input 的下拉框是否弹出!

html代码:

<!-- input  autocomplete 属性设置为开启-->
<input type="text" autocomplete="on">
<!-- input  autocomplete 属性设置为关闭-->
<input type="text" autocomplete="off">

注意:

这里需要注意的是,在 input 中如果不设置 autocomplete 属性的值,则它的默认值为 on !

form 表单设置 autocomplete 属性

如果一个form 表单内所有的 input 输入框都不需要记录用户的输入数据,并且都禁止其弹出下拉框,那么我们不用给每个 input 输入框来单独设置 autocomplete 属性,直接在 form 标签内添加 autocomplete 即可!

html 代码如下

<form action="#" autocomplete="off">
    <input type="text" name="test" />
    <input type="text" name="test" />
</form>

以上就是禁止 input 自动弹出下拉框的方法。想过胜利,想过失败,但从没想过放弃。更多关于禁止 input 自动弹出下拉框的方法请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例

CSS浮动引起的高度塌陷问题