HTML中禁止自动填充Input表单的高效解决方案

HTML中禁止自动填充Input表单的高效解决方案

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2020-11-21 14:55:01
文章简介

HTML禁止自动填充Input表单,完美解决方案:通过为表单元素添加autocomplete=off属性,有效阻止浏览器自动填充功能,提升用户体验,减少数据错误风险,确保表单数据的准确性和安全性。

  • 正文开始
  • 相关阅读
  • 推荐作品

提交登陆等表单时,允许记录了密码则会保存起来,且每次都会自动填充入input,我们有时候不需要自动填充,试过网上的各种方法都没能完美解决,最后终于找到解决办法,废话不多说,直接上代码!

<form method="post" action="">
    <input type="text" name="username" readonly="readonly" id="username">
    <input type="password" name="password" readonly="readonly" id="password">
    <input type="submit" value="登录">
</form>
<script>
    setTimeout(function removeReadonly(){
        var username=document.getElementById("username");
        var password=document.getElementById("password");
        username.removeAttribute("readonly");
        password.removeAttribute("readonly");
    },1000);
</script>

思路:首先设置input为只读readonly,当页面加载完成后,浏览器不会自动填充内容,但是也不可以进行编辑。然后我们再用js的定时器延迟一段时间后移除input的只读属性readonly,输入框便可进行再次编辑!完美解决! 

关联内容: html input 表单 方法
JS动态展示随机链接图片,轻松实现广告轮播
« 上一篇 2020年10月16日
智能识别浏览器语言,一键跳转至对应中文或英文站点
下一篇 » 2020年11月24日
  • HTML输入框(Input)美化技巧与实战
    29888阅读0条评论85个赞
    HTML页面输入框input的美化是提升用户体验的关键。通过精心设计的样式,我们可以让输入框更加吸引眼球,提升用户填写信息的积极性。简洁、大气的设计风格,让用户在浏览网页时更加愉悦。
  • 表单内Select值传递给Textarea的标准JS写法实例
    1420阅读0条评论41个赞
    标准JS写法示例:表单内select值传至textarea,通过监听select变化,获取选项值并更新textarea内容,实现数据动态传递。
  • [JavaScript] 多种方案教程:判断提交表单不能为空代码详解
    3129阅读0条评论90个赞
    本文提供了多种JavaScript代码方案,详细讲解如何判断表单提交时各项内容不能为空。无论是初学者还是有一定经验的开发者,都能在这里找到适合自己的解决方案,确保表单数据的完整性和准确性。
  • 帝国CMS用户表单字段内容锁定教程30点
    1753阅读0条评论71个赞
    帝国CMS用户表单字段优化:实现字段有内容即不可修改。方法教程简述:在表单处理逻辑中,添加判断条件,检查目标字段是否已有内容。若字段非空,则禁用该字段的编辑功能,确保用户无法更改已有数据。此操作可提升表单数据的一致性和安全性,避免误操作导致数据不一致。通过简单代码调整,即可轻松实现字段锁定功能。
  • 帝国CMS,创建登录表单详细教程示例
    2167阅读0条评论65个赞
    帝国CMS登录表单制作指南,快速上手教程,教你如何创建简洁高效的登录表单,提升用户体验。

如本文对您有帮助,就请墨鱼抽根烟吧!