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日
  • HTML5手机端专属底部客服按钮(含电话与微信)制作教程及模板下载
    49阅读0条评论0个赞
    想为手机网页添加便捷客服入口?本教程专为HTML5设计,教你打造手机端专属底部客服按钮,涵盖电话与微信两大常用联系方式。详细步骤讲解搭配实用模板实例,即使是新手也能轻松上手,快速实现网页客服功能升级,提升用户体验与沟通效率,快来下载教程开启优化之旅!
  • HTML5手机端仿微信底部菜单模板下载及完整代码
    24阅读0条评论0个赞
    HTML5精仿微信手机底部菜单模板,轻松打造移动端交互新体验!本教程详细解析如何利用HTML5技术,高度还原微信底部菜单样式与功能,包含完整代码与实例下载。无论是新手入门还是进阶开发者,都能快速掌握核心技巧,一键下载模板,快速集成至项目,提升界面交互友好度,让你的应用更贴近用户习惯。
  • MySQL查询不支持下划线的解决方法
    182阅读0条评论5个赞
    MySQL不支持直接查询包含下划线的字段名,需使用反引号`字段名`来避免冲突。同时,建议优化数据库设计,减少下划线使用,或创建别名简化查询。确保查询明确且高效,提升数据库性能。
  • 表单勾选与提交联动,勾选注册协议方可激活注册按钮
    93阅读0条评论7个赞
    注册页面优化:为提升用户体验,我们现对表单进行升级。勾选注册协议成为必要步骤,确保您了解并同意相关条款。完成勾选后,注册按钮方可激活,助您顺利完成注册流程。
  • 帝国CMS安全设置指南,简易而高效的修改方法
    261阅读0条评论3个赞
    帝国CMS安全优化轻松实现,简单设置即可提升系统安全性。通过一般安全修改和配置,有效防止潜在风险,保障网站稳定运行。无需繁琐操作,轻松守护您的网站安全。

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