elementui实现input输入框和textarea文本框回车换行
文本框回车换行
·
表单输入框,按下回车键,可以实现跳到下一输入框,文本框也可以,已经做好封装了
Vue.directive('enterNextInput', {
inserted: function (el, callback) {
el.addEventListener("keypress",function(e){
e = e || window.event;
let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
if(charcode == 13){
var dom = document.getElementsByClassName('input')
let list = []
for (let i = 0; i < dom.length; i++) {
let node = dom[i].childNodes;
if(node.length > 0){
node.forEach(v=>{
if(v.nodeName == 'TEXTAREA' || v.nodeName == 'INPUT'){
list.push(v)
}
})
}
}
for(let j = 0; j <= list.length ;j++){
if (list[j] == document.activeElement) {
if (j ==list.length-1) {
return
}
list[j+1].focus()
return
}
}
}
});
}
});
然后在配合elementui的表单输入做跳转
<el-col :sm="24" :md="24" :lg="24">
<el-form-item v-if="!isLogin" label="企业名称:" prop="companyName">
<el-input class="input" v-enter-next-input v-model.trim="model.companyName" maxlength="30" clearable placeholder="请输入企业名称" v-enter-next-input></el-input>
</el-form-item>
<el-form-item v-else label="企业名称:">
<v-text-ellipsis :content="user.companyName" :limit="20"></v-text-ellipsis>
</el-form-item>
**加粗样式**</el-col>
局部自定义指令
index.vue(组件)
<template>
<div>
<!-- 让input元素在打开页面的时候就获得焦点 -->
<input type="text" v-autoFocus >
</div>
</template>
<script>
export default {
directives('enterNextInput', {
inserted: function (el, callback) {
el.addEventListener("keypress",function(e){
e = e || window.event;
let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
if(charcode == 13){
var dom = document.getElementsByClassName('input')
let list = []
for (let i = 0; i < dom.length; i++) {
let node = dom[i].childNodes;
if(node.length > 0){
node.forEach(v=>{
if(v.nodeName == 'TEXTAREA' || v.nodeName == 'INPUT'){
list.push(v)
}
})
}
}
for(let j = 0; j <= list.length ;j++){
if (list[j] == document.activeElement) {
if (j ==list.length-1) {
return
}
list[j+1].focus()
return
}
}
}
});
}
});
data () {
return {
}
},
methods:{
},
}
</script>
<style scoped>
</style>
全局自定义指令
在main.js中引入全局自定义指令
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import { util } from '@/utils/image.js'
import { file } from '@/utils/filecache.js'
Vue.prototype.$util = util
Vue.prototype.$file = file
Vue.config.productionTip = false
Vue.directive('enterNextInput', {
inserted: function (el, callback) {
el.addEventListener("keypress",function(e){
e = e || window.event;
let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
if(charcode == 13){
var dom = document.getElementsByClassName('input')
let list = []
for (let i = 0; i < dom.length; i++) {
let node = dom[i].childNodes;
if(node.length > 0){
node.forEach(v=>{
if(v.nodeName == 'TEXTAREA' || v.nodeName == 'INPUT'){
list.push(v)
}
})
}
}
for(let j = 0; j <= list.length ;j++){
if (list[j] == document.activeElement) {
if (j ==list.length-1) {
return
}
list[j+1].focus()
return
}
}
}
});
}
});
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
更多推荐
已为社区贡献10条内容
所有评论(0)