vue中，阻止默认事件

在vue项目中，遇到这样一个需求：页面中有好多输入框，在某一个输入框中按Tab键时不触发默认事件，而是变成输入两个空格。

• 这里面有一些注意点

  1，vue项目
  2，众多输入框中的某一个输入框
  3，按下Tab键，事件监听
  4，阻止默认事件，变成自定义事件

• 这就有了一个思路：

  当焦点在本输入框时，添加事件监听（阻止默认事件，变成自定义的）。
当失去焦点时，移除事件监听（只在本输入框内生效，其他输入框不生效）。

• 用vue的写法就是：

  <el-input v-model="ruleForm.extras" type="textarea" style="padding-right:15em;"
                id="freeinput"
                :rows="6"
                placeholder="请输入自由条件内容（json格式）"
                @focus="add_eventListener"
                @blur="remove_eventListener">
  </el-input>
  

  methods:{                         
          //在vue项目中，需要将事件监听封装成函数，让this托管，才能生效，所以是这样的写法。 
          add_eventListener() {
              window.addEventListener('keydown', this.keyFun, true)
          },        
          remove_eventListener() {
              window.removeEventListener('keydown', this.keyFun, true)
          },    
          keyFun(event) {
              if (event.keyCode === 9) {
                  // 阻止默认事件
                  event.preventDefault(); 
                  let ids = "  ";
                  // 获取对应标签
                  let obj = document.getElementById('freeinput');
                  // 获取光标的起始位置, 在未做人为选中的情况下, start和end是一样的
                  let start = obj.selectionStart; // 注意：使用vue对象时，没有selectionStart/selectionEnd属性，所以换成了原生js对象
                  let end = obj.selectionEnd;
                  // 获取选中的文本
                  let text = window.getSelection().toString();
                  // 如果有换行符, 需要替换, 实现效果同代码编辑器的选中集体缩进
                  text = ids + text.replace(/\n/g, '\n' + ids);
                  // 在原始光标位置中插入tab对应的字符
                  obj.value = obj.value.substring(0, start) + text + obj.value.substring(end); 
                  // 将光标设置到新的位置
                  obj.setSelectionRange(start + ids.length, start + text.length);
              }
          }
      }
  

• 效果图：

  处理前按Tab键效果.gif 处理后按Tab键效果.gif