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
          } 
        } 
      }
    });
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

然后在配合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>

1
2
3
4
5
6
7
8
9

局部自定义指令
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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

全局自定义指令
在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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50