需要输入框实现自动填充

img

img


为什么有的输入框能记住之前输的内容。有的不行,每次都要重新输入一遍。
怎么样才能让输入框记住之前输入的内容啊,是浏览器的问题吗?救命啊
图一是两个输入框,无法保留上一次输入的内容供我选择,必须得重新输入。图二是同一个网页的另一个输入框,为什么这个输入框就保留了之前输入过的内容了啊。我崩溃了
求推荐可以实现自动填充效果的浏览器或者插件

有两个插件可以做到:

  1. BitWarden
  2. ChromeKeePass

浏览器的cookie功能开启,会有记忆的,他是和你的浏览器有关,后端代码,没关系吧

数据接收之前没有获取,就会直接保存,数据接受之后就要保存起里并传送给后台来调用,如果是单纯的开发阶段没有后台配合可以直接在输入框的标签里面加一个值等于你先注册的,就可以直接用了,如果是前后端交互的话需要数据请求响应来实现

只要你浏览器开启了记忆功能,就能出现,如果开启了还没有的话,就是后端代码的问题,不给你显出来呗,cookies记忆也分时间长短的

这个可能会对你有帮助

你好,望采纳!

对于chrome浏览器,对input设置autocomplete="new-password",可以起到不自动填充密码的效果
对于360浏览器,对于autocomplete不支持,所以得使用一些其他技巧,如下所示:
给第一个type="text"的input前面再加一个隐藏的type="text"的input和一个隐藏的type="password"的input。(亲测有效,但是博主在不断增加input的情况下,又失效了)

<html>
<head></head>
<body>
    <form>
        <label>Login <input type="text" name="login"/></label></br>
        <label>New Password <input type="password" id="password" name="pwd" readonly autocomplete="new-password"/></label><br/>
        <input type="submit">
    </form>
    <script>
        document.getElementById('password').onfocus = function() {
            document.getElementById('password').removeAttribute('readonly');
        };
    </script>
</html>


将type="password"的input放前面,type="text"的input放后面,并使用flex-direction: row-reverse进行调换顺序。(对于360上自动填充的解决,博主使用的是这种方法)

这是浏览器自身问题,如果是后台代码问题,不可能同一个浏览器有的显示有的不显示,你可以换成不同的浏览器试试,然后在设置中勾选记住cookie

很多浏览器不仅仅针对密码输入框(type=password)会有自动填充问题,文本框(type=text)有的也有自动填充问题,如最新的谷歌chrome浏览器,比如很多项目涉及到金额的输入框,会自动将账号填充到金额输入框内。针对这个问题,可以通过js控制真正完美解决,就是稍微比较麻烦,可能会对项目有所影响,所以需要针对实际需求再对自动填充问题是否予以解决。

  输入框有一个readonly属性,可以防止写入,而自动填充是浏览器记住账号密码之后对输入框的一种写入功能,而且是打开页面时的自动写入,这之间需要一定的时间性,所以在浏览器自动写入的这个时间段内将其设置readonly只读,不让其写入,当浏览器自动填充时间段过了,再给予取消readonly即可完美解决浏览器自动填充功能,而且通过实践,0.3秒的时间是不够的,还会被浏览器自动填充,而我们项目是设置了1秒钟的时间,完全可行。

输入框html部分,增加readonly属性

<input type="text" readonly="readonly"/>

输入框jquery部分,1秒之后取消readonly属性

 setTimeout(function(){
     $("input").removeAttr("readonly");
 },1000);

可以通过localStorage.setItem存储本地,之后通过localStorage.getItem取值,并通过id,class赋值,达到自动填充的效果

浏览器下载webderver插件,录制一个脚本

就是把用户之前输入的账号密码保存到数据库,当用户输入时网页就会遍历数据库,找到你的账号以前输入过的密码,并填充
可能你的浏览器并没有把它保存进去,以后登录就找不到你的数据了

HTML表单可以设定自动填充内容,但如果是记住密码的那类,还是得靠浏览器cookie的自动记忆,像360谷歌都可以。

可以在表单中设置一个隐藏的text类型和password类型的输入框,一般就可以开启默认记忆功能了

用这个插件把,https://www.keepersecurity.com/zh_CN/features/autofill.html
Keeper 使用一流的加密技术、多步验证、细粒度访问控制以及可能包括业务单元隔离的共享策略。这些功能可确保仅在需要时,并且仅授权用户才能访问关键资源。

一种是浏览器的记忆~一种自己存储到cookic 或者请求后端来实现动态选择

方案1:input中加入

autocomplete="off" 

来关闭记录功能,默认打开。
方案2:通过本地缓存实现历史记录功能,cookie或者localstorage

有的是这个框不允许记住比较隐私的号码,在代码层面做了限制。

浏览器的自动填表在一些输入框内不支持。下一个自动填表插件。

通过浏览器账号密码管理可以自动输入,也可以使用第三方的工具设置

Internet 选项→内容→自动完成→设置

input 的属性autocomplete 默认为on
其含义代表是否让浏览器自动记录之前输入的值
很多时候,需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到
可以在input中加入autocomplete="off" 来关闭记录
系统需要保密的情况下可以使用此参数

img

img

如果前端不好实现的话,建议根据用户ID设计历史数据表,每次触发控件的时候,去后台请求接口做成下拉列表选择即可。

https://www.jianshu.com/p/ee02821128ab

按F12,元素选择那个输入框,检查这个input有没有name属性
如果没有name属性,浏览器也无法记住这个输入选项
如果这个页面是你自己开发的话,
在input控制上添加name属性,
当你填了内容sumbit表单后,下次光标放上去就会有提示了。

这个要自己写代码了。

请问你是用什么框架 我可以帮你写一个 vue 还是jquery react

设置默认不好吗