浏览器自动填充导致input无法回显问题解决方法

最新推荐文章于 2023-09-14 12:20:13 发布
最新推荐文章于 2023-09-14 12:20:13 发布
阅读量1.2k 收藏
点赞数
分类专栏： html+css javascript 文章标签： 浏览器自动填充 input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwerty1994/article/details/80171636
版权

浏览器的自动填充导致我的用户编辑回显的数据被覆盖了，百度了很多方案都不太方便和兼容性不好！

受http://www.qiusuoweb.com/37.html这个博客启发，想到一种通用性更好的方案如下，特意记载下来！


解决:解决浏览器自动填充导致input数据不回显问题

方案： 

在input标签内加上下面代码

autocomplete="off" readonly="true" οnclick="this.readOnly =false"
亲测 360浏览器和 chrome浏览器可以用 ，其他的自行测试！



雨夜星辰03
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于layui时间回显问题的解决方法
10-16
今天小编就为大家分享一篇关于layui时间回显问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端页面输入值却获取不到
katyZhong的博客
08-30 286
<td><input id="merchantName" name="merchantName" type="text" /></td> var merchantName = $('#merchantName').val(); 前端页面输入值却获取不到，原因：同一个jsp或html中，id 名字不可重复，否则会获取不到值。 更改为： <td><input id="merchantNames" name="merchantNames" type="te
浏览器自动填充但是数据为空的问题
Wonder
05-30 1098
实现逻辑：失焦时可以判断一下表单数据是否为空，如果为空，就去获取input框的值，获取到的如果不是空值，就可以认为数据首次未绑定成功，此时把获取到的value值手动赋给表单，这样，失焦时，由于表单有数据，输入框不会出现清空现象，而且视图和表单的数据均有值，就可以解决该问题。基于这个想法，给表单加了监听，发现虽然看着已经填充数据了，但是表单上的数据一直为空，后面失焦，输入框清空，表单数据也并未变化过。该问题也不是什么很难解的问题，主要是记录一下排查问题的过程，也和大家分享一下排查思路。子组件中方法/参数等；
解决element的el-input 输入框浏览器自动填充账号密码问题
weixin_44378370的博客
02-15 1140
https://www.cnblogs.com/web-aqin/p/14929767.html
Web前端html的input框有value值,但是不显示
Inmaturity_7的博客
08-21 9911
Web前端html的input框有value值,但是不显示 今天遇到一个令人头疼的问题，就是input框有value值，但它显示placeholder的值,删了placeholder，输入框直接空了。如下图： 我的jsp页面代码: <c:choose> <c:when test="${weicaiOnlineResume.experienceName ne null}"> <input type="text" name="companyName" valu
Vue表单回显页面不更新，表单赋值不更新，表单失效
dg_xdg的博客
09-14 1072
比如表单中有个name字段，如果他被监听了，那一定有个getName和setName之类的方法，这是Vue框架给添加的；直接赋值一个对象导致这些内部的绑定丢失了，vue2中的对象的监听只是浅监听，检测不到内部变化，也就无法触发双向绑定。表单在绑定v-model="form"时，form里面的字段被表单内的各个输入框绑定了；点击编辑时，打开一个表单窗口，请求接口拿到数据后赋值给表单，表单直接不能用了。然后页面中输入框输入值，发现form中的对应字段不改变。输出一下form，发现输出的对象。
bash脚本输入密码不回显问题的解决方法
09-15
编写一个bash脚本时，需要用户输入一个密码，方可继续后续流程，但是又要保证用户输入的密码不会被别人看到，因此排除了通过参数将密码传入脚本的方案
解决layui富文本编辑器图片上传无法回显的问题
10-16
今天小编就为大家分享一篇解决layui富文本编辑器图片上传无法回显的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
PC端浏览器自动填充账号密码输入框问题该如何解决？
qq_40868156的博客
06-27 3433
解决浏览器自动填充账号密码输入框问题
关于input标签在ie6下不显示的问题
weixin_46095773的博客
06-27 238
关于标签在ie6下不显示的问题，这里以input为例，话不多说，上代码 <form id="searchForm" method="post" action="/e/search/index.php"> <input id="searchInput" type="hidden" name="show" value="title"> <input type="hidden" id="tempid" name="tempid" value="2"> &
解决浏览器自动填充密码问题
liangdarena的博客
12-02 1286
解决浏览器密码框自动填充问题
关闭input标签的回显数据
lovecc的博客
10-29 1174
平时使用input标签时，总是会显示曾经输入过的数据 可以给input标签设置属性**autocomplete=“off”**来关闭回显数据
密码输入框，获取焦点不弹出浏览器的填充账号密码弹窗的方法
weixin_45899022的博客
05-20 1052
<el-input class="password-input" v-model="form.password" placeholder="请输入密码" ></el-input> .password-input{ -webkit-text-security: disc; }
前端如何解决浏览器自动填充input输入框账号密码的问题
热门推荐
migexiaoliang的博客
04-14 1万+
问题描述 【登录】子用户登录页面自动填充位置错误，本来主账号的账号密码，等切换到子账号登录页的时候，自动填充到了子账号的位置。 解决方案 <input auto-complete="new-password" autocomplete="new-password" v-model="childUserName" placeholder="IAM用户名" @focus="clearErrorInfo('childUserName')
elementui input输入框回显不显示
qq_49642079的博客
05-12 3448
问题描述：在某个回调事件中，给表单中的某个input赋值(已绑定v-model)，input不显示数据且无法编辑，在这个表单的其他input中修改值时，这个被赋值的input才会回显。 解决办法：在回调事件函数中，给input赋值后，强制刷新：this.$forceUpdate(); this.$http.post("/rentRecord/getRechargeStandard", params).then((res) => { if (res.status ...
解决记住登录账号密码的网站，会将账号密码回显到输入框问题
Lear的博客
09-18 7520
场景：某个网站登录时在浏览器会选择保存密码，则在页面上的输入框内会将该网站保存过的账号或密码回显。一般这种需求对用户是不需要的，所以下面为解决此问题的方法????： 1.input 标签不要用id选择器，去掉就不会自动回填浏览器自动保存的用户名,密码了。可以用class类选择器。 2.解决密码回显： 2.1“大部分浏览器都是根据表单域的type="password"来判断密码域”，因此解决办...
input输入框回显接口数据
小白白的博客
06-28 4812
input输入框动态显示数据 用v-model <input type="text" v-model="goods.title" maxlength=8 placeholder="请输入菜品名称" / goods.title为接口中的变量名，此时input框就显示出来接口里面的数据了
react antd对话框里面input的数据回显
qq_48211147的博客
08-13 3356
最开始使用initialValues设置里里面的值，然后用setName修改，但是这样导致了当你点击张三的名字后，再点击李四的名字，出现的还是张三的名字，然后点击取消的一瞬间，才会重新渲染成李四的名字。............
小程序中input标签没有反应_小程序input组件中的value有值，但是页面上却没有显示出来，这是为什么？...
weixin_39795971的博客
12-19 953
陶玲2019-11-27回复?加粗标红插入代码插入链接插入图片上传视频请 登录 后发表内容关闭新增或编辑超链接链接地址关闭插入视频视频链接用的是wepy1.x版本的框架dom结构data-item="{{item}}" bindchange="updateNum"/>js逻辑updateNum(e) {const { item } = e.currentTarget.datasetlet n...
Element el-date-picker 表单校验和数据回显问题解决方法
最新发布
10-09
对于 Element UI 的 el-date-picker 表单校验和数据回显问题，可以通过以下方法解决： 1. 表单校验： - 使用表单校验规则进行验证。在 el-date-picker 上使用 `rules` 属性来设置校验规则，例如： ```html 日期...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值