在 textarea 中，在键入时将两个 \n 替换为制表符缩进

Question

我正在尝试将两个 \n\n（因此当按两次输入键时）替换为一个选项卡（\t）

如果我写 "bla bla bla [enter enter] bla bla bla bla bla [enter enter] bla bla"，它不会在我仍在键入时实现制表符缩进，但是当我在外部单击时它适用（不聚焦文本区域）。

<div id="app">
  <textarea v-model="testVal"></textarea>
</div>

和 vue:

new Vue({
    el: '#app',
  data: {
    testVal: 'Val'
  },

  watch: {
    testVal(val) {
        this.testVal = val.replace(new RegExp('(\n){2,}', 'gim') , "\t");    
    }
  }
})

这是一个 fiddle 您可以观察到的问题： https://jsfiddle.net/8gst4mrh/1/

其实我想实现的是，当用户点击两次enter的时候，改成tab缩进

我做错了什么？

Answer 1

这似乎是 Vue 版本 1 的问题。Your code works as expected using Vue v2.

如果你需要使用那个版本的Vue，你应该明确地监听input事件并调用一个方法来更新testVal的值：

new Vue({
  el: '#app',
  data: {
    testVal: 'Val'
  },
  
  methods: {
    updateTestVal() {
      this.testVal = this.testVal.replace(new RegExp('(\n){2,}', 'gim') , "\t");    
      console.log(this.testVal)
    }
  }
})

textarea {
  width: 500px;
  height: 500px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <textarea v-model="testVal" @input="updateTestVal"></textarea>
</div>

在 textarea 中，在键入时将两个 \n 替换为制表符缩进

In textarea, replace two \n with tab indent while typing

javascript

regex

textarea

vue.js