关于 Element UI 输入框记忆性失效的问题

首先说一个原生的input框默认的是有记忆功能的,而记忆功能在于一个属性— autocomplete  ,而这个属性是 HTML5 的一个新属性, 在不支持HTML5的浏览器下是没有用的 。 autocomplete 属性规定输入字段是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
autocomplete=“off”,即规定禁用自动完成功能 autocomplete=“on”,即规定开启自动完成功能 注释:autocomplete 属性适用于以及下面的类型:text, search, url, telephone, email, password, datepickers, range 以及 color。在一部分浏览器中,autocomplete 属性是默认关闭的,如果需要打开就打开 一下。 那么重点来了: Element UI中 官方实例中的输入框也无法记住密码,即使加上了官方文档中的 auto-complete="on" 依然无效 。其中还跟input的一个name属性有关,name 属性的意义并不只是在于提交表单这一方面,他还有一个隐藏属性:“支持表单的记忆功能”! 之所以项目中的输入框没有加上 name 属性,归根结底在于 Vue 的引入使得对数据的操作前所未有的方便,再加之双向数据绑定的特性,在提交表单时早已摒弃了原生通过 Form 来 submit 表单的方式 ,而是直接通过操作数据来进行提交,name 属性也就失去了其用意义。 综上所述:总结解决方案(直接上代码) <el-form :model="ruleForm" ref="ruleForm" onsubmit="return false;"> <el-form-item prop="test"> <el-input v-model="ruleForm.test" name="test" autocomplete="on"></el-input> </el-form-item> <el-button type="primary" native-type="submit" @click="submitForm">提交</el-button> </el-form> 注意: el-button由于type属性被替换掉了,所以提交表单的时候需要加上native-type属性,即为 native-type 原生 type 属性 。 版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创 转载请注明:出处来自田珊珊个人博客 » 关于 Element UI 输入框记忆性失效的问题
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注
U乐娱乐注册