How to trigger 'change' on <input> changed programmatically

Question

I'm going to build a customized virtual keyboard, so that's the first problem I've encountered. I have an input element, whose value is changed from outside, in my case by pressing a button. The problem is that there seems to be no way to trigger the normal 'change' event.

Neither clicking outside the input, nor pressing Enter gives any result.

What might be the correct way of solving this problem?

<template>
  <div class="app-input">
    <input @change="onChange" type="text" v-model="value" ref="input">
    <button @click="onClick">A</button>
  </div>
</template>

<script>
export default {
  name: "AppInput",
  data() {
    return {
      inputDiv: null,
      value: ""
    };
  },
  props: {
    msg: String
  },
  methods: {
    onClick() {
      this.value = this.value + "A";
      this.inputDiv.focus();
    },
    onChange() {
      alert("changed");
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.inputDiv = this.$refs.input;
    });
  }
};
</script>

The whole pen can be found here.

CPPUIX · Accepted Answer · 2023-11-10 17:15:33Z

6

v-on:change would only trigger on a direct change on the input element from a user action.

What you are looking for is a watcher for your data property, whenever your value changes, watcher will execute your desired function or task.

watch: {
  value: function() {
    this.onChange();
  }
}

The watch syntax is elaborated on the provided official vuejs docs link. Use your data property as the key and provide a function as a value.

Check the snippet:

export default {
  name: "AppInput",
  data() {
    return {
      inputDiv: null,
      value: ""
    };
  },
  props: {
    msg: String
  },
  methods: {
    onClick() {
      this.value = this.value + "A";
      this.inputDiv.focus();
    },
    onChange() {
      alert("changed");
    }
  },
  // this one:
  watch: {
    value: function() {
      this.onChange();
    }
  },
  // --- rest of your code;
  mounted() {
    this.$nextTick(() => {
      this.inputDiv = this.$refs.input;
    });
  }
};

edited Nov 10, 2023 at 17:15

CPPUIX

2,4178 gold badges17 silver badges38 bronze badges

answered Nov 23, 2019 at 16:40

Towkir

4,0142 gold badges27 silver badges43 bronze badges

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

11 Comments

Eugene Barsky Over a year ago

The problem is that if it triggers onChange on every value change (which will be with the watcher) this is not how the vanilla input works.

Towkir Over a year ago

the event you are talking about is the change event, it usually works like when you type something and the input element loses focus, and if there is any change the event triggers, but when you are choosing to click on the custom button, your input element already lost focus, I am not sure how else you can capture the change, or how do you know user has done changing since they are not providing inputs from the keyboard, and your input element lost focus, and you are manually focusing it each time

Eugene Barsky Over a year ago

I understand this, that's why I'm wondering, what could be the solution...

Dan Over a year ago

@EugeneBarsky Then you should realize why these 2 statements cannot coexist: "The problem is that if it triggers onChange on every value change" - "I'd like it to work as close as possible to an ordinary input, where we have the change event on focus blur, enter etc. Not on addition of a letter". It can't be both ways.

Dan Over a year ago

It's not clear what you want. You can either do some processing after every letter change or choose another event to process from, like Enter keypress. It's just that change probably isn't an option because the input is blurred on every virtual button press, and blur triggers change if there has been some typing too. (Can the user type too with the actual keyboard?) If you must use the change event, the best way is probably to make a custom input wrapper component and emit the change whenever you want.

|

primegxy · Accepted Answer · 2019-11-24 01:58:06Z

1

When I build any new vue application, I like to use these events for a search input or for other inputs where I don't want to fire any functions on @change

<div class="class">
   <input v-model="searchText" @keyup.esc="clearAll()" @keyup.enter="getData()" autofocus type="text" placeholder="Start Typing ..."/>
   <button @click="getData()"><i class="fas fa-search fa-lg"></i></button>
</div>

These will provide a better user experience in my opinion.

answered Nov 24, 2019 at 1:58

primegxy

1,88821 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to trigger 'change' on <input> changed programmatically

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related