Creating a Directive in Vue.js to Limit Input Fields to Numeric Values

Question

Creating a Directive in Vue.js to Limit Input Fields to Numeric Values

After recently diving into Vue.js, I encountered a challenge. I needed an input field that only accepted numeric numbers; any other value entered by the user should be replaced with an empty string. To achieve this functionality, I decided to create a custom directive called 'numericOnly'.

Below is the code for my custom directive:

Vue.directive('numericOnly', {
  bind (el, binding, vnode) {
    regex = /^[0-9]*$/
    if(!regex.test(el.value)){
     el.value = el.value.slice(0, -1)
    }
  }
})

Here's how I implemented the custom directive in my template:

<input v-numericOnly name="mobileNumber" placeholder="Mobile Number" >

The issue I encountered was that the custom directive only ran once when the input field was first bound to the DOM.

I would greatly appreciate assistance in resolving this problem. Thank you in advance!

javascript vue.js vuejs2

Answer 1

Answer №1

To accomplish your goal, make sure your directive is listening for the keyup event on the input element:

Vue.directive('numericOnly', {
  bind(el) {
    el.addEventListener('keyup', () => {
      let regex = /^[0-9]*$/
      if (!regex.test(el.value)) {
        el.value = el.value.slice(0, -1)
      }
    })
  }
})

Answer 2

To accomplish your goal, make sure your directive is listening for the keyup event on the input element:

Vue.directive('numericOnly', {
  bind(el) {
    el.addEventListener('keyup', () => {
      let regex = /^[0-9]*$/
      if (!regex.test(el.value)) {
        el.value = el.value.slice(0, -1)
      }
    })
  }
})

Answer 3

Answer №2

import Vue from 'vue'    
Vue.directive('numericOnly', {
bind(el, binding, vnode) {
    el.addEventListener('keydown', (e) => {
        if ([46, 8, 9, 27, 13, 110, 190].includes(e.keyCode) ||
            // Allowing special key combinations
            (e.keyCode === 65 && e.ctrlKey) || 
            (e.keyCode === 67 && e.ctrlKey) || 
            (e.keyCode === 88 && e.ctrlKey) || 
            (e.keyCode >= 35 && e.keyCode <= 39)
           ) {
            // Do nothing, let the event happen
            return
        }
        // Ensure only numeric input is allowed
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault()
        }
    })
}

})

Answer 4

import Vue from 'vue'    
Vue.directive('numericOnly', {
bind(el, binding, vnode) {
    el.addEventListener('keydown', (e) => {
        if ([46, 8, 9, 27, 13, 110, 190].includes(e.keyCode) ||
            // Allowing special key combinations
            (e.keyCode === 65 && e.ctrlKey) || 
            (e.keyCode === 67 && e.ctrlKey) || 
            (e.keyCode === 88 && e.ctrlKey) || 
            (e.keyCode >= 35 && e.keyCode <= 39)
           ) {
            // Do nothing, let the event happen
            return
        }
        // Ensure only numeric input is allowed
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault()
        }
    })
}

})

Creating a Directive in Vue.js to Limit Input Fields to Numeric Values

Answer №1

Answer №2

Similar questions

Node's getRandomValues() function is throwing an "expected Uint8Array" error

Enhance Material UI with custom properties

When the user clicks on an element, my JavaScript code dynamically updates the CSS property by changing the window

Unable to execute redirect function in Next.js 14 application

Leveraging Vue slots to display a component inside another component

Read a local file using the HTML5 FileReader

The screen reader seems to be malfunctioning as soon as I include this particular code

The jQuery datetimepicker fails to reflect changes made to the minDate property

The body in Express is set to "Cannot GET [route]" during the execution of asynchronous code

Retrieve SQL data and store it in a JavaScript variable

The functionality of a button within an AngularJS directive is not functioning as intended

AJV is failing to validate my body using the function generated by the compile method

What could be the reason for the jquery click event not working?

Issue with ngModelChange and change events not functioning properly in Internet Explorer 11

Using Material UI's onClose as an alternative to disableBackdropClick

Modifying the design of a website in real-time using the EXPRESS.js and NODE.js frameworks

Setting up JavaScript imports in Next.js may seem tricky at first, but with

Troubleshooting EJS Relative Path Problem when Using "include" in an HTML Document

Error in Passport JS: Trying to use an undefined function

A step-by-step guide on inserting a date into a MongoDB database using data from