Email address or username is probably the most important element of any web application. If you’re doing a web app, there’s a very high possibility that you’ve dealt with email addresses at some point. Most of the time, at a sign-up or sign-in page. While, the user submitted form is often sanitized at the backend server, you don’t want to take any chances. There are chances that a user might enter their email address in a form without worrying about the case sensitivity. And if the backend server doesn’t sanitize / validate the submitted form data, it can cause chaos ?. That’s why you need to take care of it. Here, I’m going to show 3 ways to auto-lowercase the the user input text in Vue.js.

Here’s the template code I’ve written:

<div id="app">
  <h2>Enter email address</h2>
  <div class="email-container">
     <label for="email1">Email 1:</label>
     <input id="email1" class="email-input" 
            v-model="emailAddress1" 
            placeholder="nightprogrammer95@gmail.com">  
  </div>
   <div class="email-container">
     <label for="email2">Email 2:</label>
     <input id="email2" class="email-input" 
            v-model="emailAddress2" 
            v-on:keyup="handleInputOnKeyup" 
            placeholder="nightprogrammer95@gmail.com">  
  </div>
   <div class="email-container">
     <label for="email3">Email 3:</label>
     <input id="email3" class="email-input" 
            v-model="emailAddress3" 
            v-on:change="handleInputOnChange" 
            placeholder="nightprogrammer95@gmail.com">  
  </div>
</div>
Code language: HTML, XML (xml)

And here’s the script code:

new Vue({
  el: "#app",
  data: {
    emailAddress1: null,    
    emailAddress2: null,    
    emailAddress3: null
  },
  watch: {
    emailAddress1(newVal) {
    	this.emailAddress1 = this.emailAddress1.toLowerCase()
    }
  },
  methods: {
    handleInputOnKeyup() {
	this.emailAddress2 = this.emailAddress2.toLowerCase()
    },
    handleInputOnChange() {
      this.emailAddress3 = this.emailAddress3.toLowerCase()
    }
  }
})
Code language: JavaScript (javascript)

And here’s some minor CSS:

body {
  font-family: Arial, Helvetica, sans-serif;
}

.email-container {
  padding: 8px 0px;
}

.email-input {
  width: 300px
}
Code language: CSS (css)

Now, let’s try to understand the 3 ways.

Method 1:

In the first solution (Email 1), I’ve used a local state called emailAddress1. I’ve used v-model to bind it with the user input. Then, I’ve also added a watcher for it. So that, whenever there’s a change in the value of emailAddress1 (through user keyboard input), the watch method emailAddress1(newVal) will update the emailAddress1 value by converting it to lowercase as on line 10.

Method 2:

In the second solution (Email 2), I’ve used a v-on:keyup event listener (also called @keyup) and used a method named handleInputOnKeyup() to update the value of emailAddress2 by converting it to lowercase, whenever a key is pressed and released. It’s worth nothing that you’ll notice a few milliseconds delay if you type in something in upper case. That is the time you spend between pressing the key, and releasing it.

Method 3:

In the third solution (Email 3), I’ve used an event listener v-on:change (also called @change). This will look for any change in the local state emailAddress3, and call the method handleInputOnChange() in response. Inside handleInputOnChange definition, I’ve updated the value of emailAddress3 by lower casing it.

You can find a working solution of the above code in my repo here ?:

JSFiddle