【项目经验】:elementui 表单问题

一.项目问题

1.在登录页面输入密码后浏览器保存密码,在下一次别的页面打开输入框会自动输入浏览器保存的密码。原因是浏览器会默认认为当前input的属性是password。

2.当form表单只有一个表单时回车提交表单问题

二.最终解决方案

浏览器自动填充密码问题

先设置input输入框的type属性为text; 然后获取焦点时改变type为password。

复制代码
// html
<input type="password" onfocus="type='password'">
<el-input type = 'text' @focus = "focusFn"></el-input>

// js
    
focusFn(e){
   e.srcElement.type = 'password'
}

form表单只有一个表单时回车提交表单问题

表单加@submit.native.prevent

html 复制代码
<el-form @submit.native.prevent>
        <el-form-item>
            <el-input 
                v-model="form.password"
                @keyup.enter.native="enterInput"
            />
        </el-form-item>
    </el-form>
相关推荐
童先生10 分钟前
Nginx + Vue/React 前端 + API:防止路径混淆漏洞与跨域问题实战分享
前端·vue.js·nginx
黑夜照亮前行的路1 小时前
JavaScript 性能优化实战技术指南
javascript·性能优化
Stringzhua2 小时前
Vue数据的变更操作与表单数据的收集【6】
前端·javascript·vue.js
乐~~~3 小时前
el-date-picker type=daterange 日期范围限制
javascript·vue.js·elementui
初遇你时动了情3 小时前
uniapp vue3 ts自定义底部 tabbar菜单
前端·javascript·uni-app
烛阴5 小时前
掌握 TypeScript 的边界:any, unknown, void, never 的正确用法与陷阱
前端·javascript·typescript
四岁爱上了她5 小时前
vue3+socketio一个即时通讯的小demo
vue.js·websocket
前端工作日常7 小时前
H5 实时摄像头 + 麦克风:完整可运行 Demo 与深度拆解
前端·javascript
韩沛晓7 小时前
uniapp跨域怎么解决
前端·javascript·uni-app
Rubin937 小时前
TS 相关
javascript