在textarea的，與標籤縮進替代兩個時\ n打字

我試圖替代兩個\n\n（因此進入按壓兩次時）用標籤打算（\t）在textarea的，與標籤縮進替代兩個時 n打字

如果我寫「唧唧歪歪[進入輸入] bla bla bla bla bla [enter enter] bla bla「，但是我仍然在輸入時沒有實現tab縮進，但是當我在外面點擊時（未對焦textarea）它適用。

<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/

我真正想要實現的是，當用戶點擊進入兩次，變化它以製表符縮進

我在做什麼錯？

來源

2017-10-11 senty

在您的演示，'的console.log（this.testVal）'用標籤記錄的值。 –

但是，它不適用於textarea內。但是當我點擊外部（未對焦textarea）時，它將被應用。 – senty

出於好奇，用'\ t'替換'\ n \ n'而不是處理'textarea'裏面的'tab'鍵是什麼原因？ – Traxo

這似乎是與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>

來源

2017-10-11 13:15:03 thanksd

輝煌的工作！ – Rnice4christ

謝謝！像魅力一樣工作！我有另一個問題。如果你想保留'\ n \ n'但是在他們後面添加縮進，你會怎麼做？ – senty

這可以讓你開始：'if（foo.slice（-2）.match（/ \ n \ n /））{foo + ='\ t'}'。如果你不明白，我會發表另外一個問題 – thanksd

在textarea的，與標籤縮進替代兩個時\ n打字

回答

相關問題