Vue directive to update input on blur

Question

I'm trying to implement a directive that will trim the value of an input on blur event:

import { DirectiveOptions } from "vue";

const Autotrim: DirectiveOptions = {
    inserted(el) {
        if(!(el instanceof HTMLInputElement) && !(el instanceof HTMLTextAreaElement)) {
            throw 'Cannot apply v-autotrim directive to a non-input element!';
        }

        el.addEventListener('blur', () => {
           if(el.value)
               el.value = el.value.trim();
        });
    }
};

The input is updated, but the bound value in the model is not, and after any change somewhere else in the component it reverts back to an un-trimmed state.

What is the correct way to ensure the model is also updated?

EDIT Here's a codepen link to try: https://codepen.io/impworks/pen/mddMPyx

Jonathan Larouche · Accepted Answer · 2019-10-28 12:52:51Z

3

You need to trigger the input event to let Vue know that value was changed.

Do this once you've detected that input value is different than current value (to avoid infinit recursion)

if (el.value && el.value !== el.value.trim()) {
    el.value = el.value.trim();
    el.dispatchEvent(new Event('input'));
}

edited Oct 28, 2019 at 12:52

answered Oct 28, 2019 at 12:06

Jonathan Larouche

9927 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Impworks Over a year ago

Unfortunately didn't work for me. Please check the codepen link in the updated post: enter " foo" as first name, press tab (see the trim in action), then start typing anything into last name and the trim will be undone

Jonathan Larouche Over a year ago

I've used the wrong event type, VueJS is listening to input event. I've tried the codepen example with input and it worked fine.

Teddy · Accepted Answer · 2019-10-28 12:55:03Z

2

Refer this: https://stackoverflow.com/a/49602559/1364747

Try the 'input' event
Try the bind method and vnode if above doesn't work

answered Oct 28, 2019 at 12:55

Teddy

4,3333 gold badges38 silver badges65 bronze badges

Collectives™ on Stack Overflow

Vue directive to update input on blur

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related