CODEWITHSUNDEEP
javascriptvuejs2textarea
Ömer Doğan
Ömer Doğan

Reputation: 691

How can I block some characters in a textarea with VueJs?

I have a textarea for sending messages and I wanna block emails and site links. So when I write an @ or https:// there must be error messages shown, using v-if, but how can I do this? Which functions?

new Vue({
  el: "#app",
  data: {
  	message: {
    	content: ""
    }
  },
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <div>
 <textarea v-bind="message" v-model="message.content" cols="30" rows="10">
   
 </textarea>
 
 <p v-if="message.content == '@'">
   No special characters
 </p>
 </div>
</div>

Upvotes: 3

Views: 1061

Answers (2)

ﾃﾞﾋﾞｯﾄ
ﾃﾞﾋﾞｯﾄ

Reputation: 289

You can check by regex type , for your condition var regex = /(@|https)/g; . Also set hasError data for message display control and you can use vue watch for your data changing (message.content)

new Vue({
  el: "#app",
  data: {
  	message: {
    	content: ""
    },
    hasError: false
  },
  watch: {
    'message.content': function(newVal,oldVal) {
       var regex = /(@|https)/g;
       this.hasError = newVal.match(regex);
    }
  }
})
body {
  background: #20262E;
  padding: 10px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 10px;
  transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <div>
 <textarea v-bind="message" v-model="message.content" cols="30" rows="5">
   
 </textarea>
 
 <p v-if="hasError">
   No special characters
 </p>
 </div>
</div>

Upvotes: 2

curious lad
curious lad

Reputation: 164

i think you should add method @change or @input to textarea, and then test for everything using regex and than replace it or whatever you want to do

Upvotes: 0

Related Questions