CODEWITHSUNDEEP
javascriptvue.jsvuejs2
JesúsDel
JesúsDel

Reputation: 103

Allow only writing letters in an input

I am trying that in an input only letters can be written and that special characters or numbers cannot be written, for now I have succeeded unless if I write "`" or "´" they continue to be written. How can I stop them from appearing?

this is what i did

https://codesandbox.io/s/kind-cannon-vccjb?file=/src/App.vue:0-699

Upvotes: 1

Views: 264

Answers (1)

Jimmar
Jimmar

Reputation: 4459

Your code seemed to be working fine for me, but it was only handling keyboard presses and didn't work when you pasted.
A better way would be to validate the input and fix it when the input value changes with @input since you were already binding the results to this.firstname.

<template>
  <div id="app">
    Only letter
    <input type="text" v-model="firstName" @input="prueba" />
    <br />
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    firstName: "",
  }),
  methods: {
    prueba() {
      //this will replace every non letter input with an empty string leading to removing it
      this.firstName = this.firstName.replaceAll(/[^a-zA-Z]/g, "");
      //you can also do your uppercase change here, no need to do it in update
      this.firstName = this.firstName.toUpperCase()
    },
  },
};
</script>

note that you can also combine both lines in one such as

this.firstName = this.firstName.replaceAll(/[^a-zA-Z]+/g, "").toUpperCase();

Upvotes: 1

Related Questions