在textarea中,在键入

时间:2017-10-11 13:09:07

标签: javascript regex vue.js textarea

我正在尝试使用标签打算(\n\n)替换两个\t(因此当输入被按两次时)

如果我写“bla bla bla [输入回车] bla bla bla bla bla [输入回车] 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");    
    }
  }
})

这是一个小提琴你可以观察到这个问题: https://jsfiddle.net/8gst4mrh/1/

我真正希望实现的是,当用户点击两次输入时,将其更改为制表符缩进

我做错了什么?

1 个答案:

答案 0 :(得分:3)

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

如果您需要使用该版本的Vue,则应明确收听input事件并调用方法来更新testVal的值:

&#13;
&#13;
new Vue({
  el: '#app',
  data: {
    testVal: 'Val'
  },
  
  methods: {
    updateTestVal() {
      this.testVal = this.testVal.replace(new RegExp('(\n){2,}', 'gim') , "\t");    
      console.log(this.testVal)
    }
  }
})
&#13;
textarea {
  width: 500px;
  height: 500px
}
&#13;
<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>
&#13;
&#13;
&#13;