input自动填入用户名和密码的解决方法

最新推荐文章于 2023-10-09 16:19:51 发布
最新推荐文章于 2023-10-09 16:19:51 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyr_student/article/details/104501078
版权

1.

<form>
   <el-input type="text" autocomplete="off"></el-input>
   <el-input type="password" autocomplete="new-password"></el-input>
</form>

 

??or??
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
防止浏览器记住用户名及密码的简单实用方法
01-21
如何设置能禁止浏览器自动保存表单信息，比如用户名，密码？ 现在很多浏览器都有自动填写功能，我在input上使用了autocomplete=”off”，但在有的浏览器上还是被记住了用户名跟密码，请问有没有更有效及简便的方法来防止浏览器记住用户名及密码？ 1、针对浏览器记住密码 1).首先大部分浏览器都是根据表单域的type=”password”来判断密码域的，所以针对这种情况可以采取“动态设置密码域”的方法： 代码如下: <input type=”text” name=”password” onfocus=”this.type=’password'” /> 解释：当这个文档框获取焦点时才将其
el-input取消浏览器自动填充问题
weixin_38684316的博客
04-15 5022
项目中需求不需要显示浏览器自动填充的内容，可以使用以下操作 <el-input v-model="value" auto-complete="off" placeholder="请输入..."></el-input> 主要是这个 auto-complete=“off” 可以实现效果 ...
解决el-form部分字段在输入的时候被带着走的问题
最新发布
sfyjknvcx的博客
10-09 135
你用form对象来控制这个表单，用form对象里面的元素来绑定里面的表单控件的v-model的话，建议要在data定义的时候和初始化form的时候写上form里面要使用的属性。你在输入完姓名，但是没有变化的时候，在学校这里输入了“师大”，结果你发现，在“师大”出现在“学校”这里后，“张三”同时也出现在了“姓名”这里。部分字段编辑的时候内容没有被修改，但是修改了另一个字段后，前一个字段的内容修改成了刚才的样子。假设有一个字段叫“姓名”，是输入框，你在输入的时候输入了“张三”，但是输入框没有变化。
解决 input 自动填充用户名及密码
weixin_42645102的博客
07-03 2341
问题：iview input自动填充用户名及密码 解决： 1.复制自动填充的 input 标签，于是有两个相同的输入框 <FormItem label="新密码" prop="passwd"> <Input type="password" v-model="formValidate.passwd" placeholder="请设置新密码"></Inpu...
解决 el-input 自动填充密码问题
magic_xiang的博客
02-18 4790
<el-form-item label="密码"> <el-input v-model="agent.password" type="password" style="position:fixed;bottom:-9999px;"></el-input> <el-input v-model="agent.password" type...
解决elementUI 表单输入框浏览器自动填写问题
hsany330的专栏
06-06 2745
所以就有一种折中的解决方案：既然浏览器要自动填充，我们就给一个具有name属性的表单让他填充，再用css的display:none将其在页面中隐藏，这样就巧妙的实现了功能，也完全兼容任何浏览器（基于目前主流浏览器的兼容性，不到万不得已不要用这个方法）。如果一个网站为 设置了autocomplete=“off”，表单中包含用户名和密码字段，浏览器仍会为这次登录提供记忆功能，并且如果用户同意，用户在下一次访问网站时，浏览器会自动填写这些字段。当用户再次访问这个网站时，浏览器使用保存的值自动填写登录字段。
html中用户名和密码input框禁止密码自动填充
liaomingwu的专栏
03-13 4790
html中用户名和密码input框禁止密码自动填充
多种方法实现360浏览器下禁止自动填写用户名密码
01-19
目前开发一个项目遇到一个很恶心的问题，本来...不负众望，本菜鸟经过了以下的尝试： 第一种：把浏览器里的自动填写密码取消掉。 很遗憾，这玩意对360毫无反应，尼玛，第一种尝试失败！（当然，即便生效，作为一个开发
jQuery 禁止表单用户名、密码自动填充功能
01-19
Html登录表单经常被自动填充，有的甚至用户从来没有登录过的网站也会...最终决定使用使用隐藏input来接受浏览器自动填充，这样不会影响用户体验，也可以兼容所有浏览器。 <input style=display:none><!-- fo
JQuery记住用户名和密码的具体实现
11-30
代码如下: <div> <input id=”username” type=”text” ...input id=”password” type=”text” class=”txt2″ value=”请输入密码” onclick=”if(this.value==’请输入密码’){this.value=”;this.type=’passw
解决element的el-input 输入框浏览器自动填充账号密码问题
前端攻城狮
05-11 1万+
浏览器会默认将已保存的账号密码 填充到input type值为password的输入框内，如果在登录页面，这是期望的，但是如果在注册页面、新增账号等页面，这就是超出需求了，如下： 可以通过以下方法解决， 在type为passworld的input中加auto-complete="new-password"属性即可 此外，我看到element官方文档的也有这个属性 用on 和off控制即可，我试了，两种方法都可以 ps：刚好遇到这个问题，简单记录一下 ...
自定义组件，vue限制input输入
SL7664的博客
11-08 570
input输入限制，防止搜狗中文输入 问题描述 input 为number类型，可以输入e，使用键盘事件，input输入限制均防不住搜狗中文输入 解决办法 尝试多种方式均实现不了，大佬写了个自定义组件轻松解决 Vue.directive('number-only', { bind: function (el) { el.handler = function () { el....
vue更新版本
热门推荐
zhangyr的博客
07-31 2万+
cnpm install -g @vue/cli
vue单独页面body的css样式
zhangyr的博客
08-28 8512
做法：给最外层div加position：fixed；height：100%；使其脱离文档流，再加自己想要的样式。 原因：app.vue中还设置了一层div，我们所加的并不是最外层的div。...
calc()函数使用注意事项
zhangyr的博客
08-22 1753
1.运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 2.calc()函数使用标准的数学运算优先级规则； 3.支持CSS3 calc函数可动态计算长度值
element组件 dialog 中form表单不能清除成功
zhangyr的博客
03-26 1749
用v-if的方法来渲染dialog子组件 1.dialog绑一个close事件，点 x 按钮调close函数 2.点取消调一次close函数 3.点保存保存成功后调一次close函数 父组件: <template> <div class="list"> <el-button @click="clickEdit">edit</el-b...
关于windows系统没有which命令的解决方案
zhangyr的博客
07-11 1650
1.which是什么命令？ linux系统下可以查找命令的绝对路径 2.windows系统下没有这个命令怎么办？ 可以用where代替
CanvasRenderingContext2D的API方法
zhangyr的博客
01-28 1490
1.向Canvas的当前路径上添加一段弧 void arc（float x,float y,float radius,float startAngle,endAngle,boolean counterclockwise)   2.向Canvas的当前路径上添加一段弧，与前一个方法相比，只是定义弧的方式不同 void arc （float x1,float y1,float x2,flo...
设计一个微信小程序用户登录界面，在界面上输入用户名、密码，还布局有登录按钮和选择保存密码，当选择了保存密码，点击登录后就可以保存用户名和密码，下次运行时用户名与密码就会自动填入。当保存密码成功时，在调试器Console面板输出保存成功提示信息。
05-25
好的，这是一个比较简单的微信小程序用户登录界面的设计，我先给你一个基本的代码框架，然后再分别讲解每一部分的具体实现。 ``` <view class="container"> <image class="logo" src="/assets/logo.png"></image> <form class="login-form"> <input class="input-field" type="text" placeholder="请输入用户名" bindinput="handleUsernameInput"></input> <input class="input-field" type="password" placeholder="请输入密码" bindinput="handlePasswordInput"></input> <label class="checkbox-label"> <checkbox class="checkbox" value="{{savePassword}}" bindchange="handleSavePassword"></checkbox> <text>记住密码</text> </label> <button class="login-button" bindtap="handleLogin">登录</button> </form> </view> ``` 可以看到这个界面非常简单，只有一个Logo、一个表单和一个登录按钮，其中表单包括用户名、密码和一个选择框用于保存密码。现在我们来分别实现这些部分。 ### Logo Logo 部分比较简单，我们只需要在微信小程序的 assets 目录下放置一个名为 logo.png 的图片，然后在代码中引用就可以了。 ``` <image class="logo" src="/assets/logo.png"></image> ``` ### 表单 表单部分包括用户名、密码和保存密码选择框。这里我们使用了微信小程序的 `<form>` 标签来实现，然后使用了三个 `<input>` 标签分别对应用户名、密码和保存密码。这里需要注意的是，我们需要给每一个 `<input>` 标签绑定一个 `bindinput` 事件来处理用户输入。 ``` <form class="login-form"> <input class="input-field" type="text" placeholder="请输入用户名" bindinput="handleUsernameInput"></input> <input class="input-field" type="password" placeholder="请输入密码" bindinput="handlePasswordInput"></input> <label class="checkbox-label"> <checkbox class="checkbox" value="{{savePassword}}" bindchange="handleSavePassword"></checkbox> <text>记住密码</text> </label> </form> ``` ### 登录按钮 登录按钮也比较简单，我们只需要在 `<button>` 标签中绑定一个 `bindtap` 事件来处理用户点击事件。 ``` <button class="login-button" bindtap="handleLogin">登录</button> ``` ### 实现逻辑 现在我们来具体实现每一个部分的逻辑。 #### 用户名和密码输入 当用户输入用户名和密码时，我们需要将输入的值保存到对应的变量中，这里我们分别使用了 `username` 和 `password` 两个变量来保存用户名和密码。 ``` handleUsernameInput: function(event) { this.setData({ username: event.detail.value }); }, handlePasswordInput: function(event) { this.setData({ password: event.detail.value }); } ``` #### 选择保存密码 当用户选择保存密码时，我们需要将保存密码的状态保存到 `savePassword` 变量中。这里我们使用了一个 `<checkbox>` 标签来实现，然后在 `bindchange` 事件中处理用户选择的操作。 ``` handleSavePassword: function(event) { this.setData({ savePassword: event.detail.value }); } ``` #### 登录 当用户点击登录按钮时，我们需要获取用户名和密码，并且根据用户选择的保存密码状态来决定是否需要将用户名和密码保存到本地存储中。这里我们使用了微信小程序的 wx.setStorage 方法来将数据保存到本地存储中。同时，我们也可以在调试器的 Console 面板中输出保存成功的提示信息。 ``` handleLogin: function() { var username = this.data.username; var password = this.data.password; var savePassword = this.data.savePassword; // TODO: 在这里实现登录逻辑，例如发送登录请求等等 if (savePassword) { wx.setStorage({ key: 'username', data: username, success: function() { console.log('保存用户名成功'); } }); wx.setStorage({ key: 'password', data: password, success: function() { console.log('保存密码成功'); } }); } } ``` 这样，一个简单的微信小程序用户登录界面的设计就完成了。当用户输入正确的用户名和密码并点击登录按钮时，我们可以根据实际需求来实现登录逻辑，例如发送登录请求等等。同时，如果用户选择了保存密码，我们也会将用户名和密码保存到本地存储中，以便下次自动填充。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值