html - JavaScript How to update the value of IMask element - Stack Overflow

admin管理员组

文章数量:1023025

I'm trying to make my IMask input update its value to be cleared when it is clicked but IMask is throwing a warning:

Element value has changed outside the mask. Sync the mask using mask.updateValue() for it to work correctly.

I've tried to use all of the ways I could find to update the value, such as mask.updateValue() though I still see the error.

import IMask from "imask";
import {contador} from "./lib/contador";
import {NewGame} from "./lib/novoJogo";
import {SorteioNumero} from "./lib/sorteioDoNumero";

let input = document.querySelector("#number");
const mask = IMask(input, {
  mask: Number,
  min: 0,
  max: 10,
});

input.addEventListener("click", () => {
  input.value = "";
  mask.updateValue();
}); 

I'm trying to make my IMask input update its value to be cleared when it is clicked but IMask is throwing a warning:

Element value has changed outside the mask. Sync the mask using mask.updateValue() for it to work correctly.

I've tried to use all of the ways I could find to update the value, such as mask.updateValue() though I still see the error.

import IMask from "imask";
import {contador} from "./lib/contador";
import {NewGame} from "./lib/novoJogo";
import {SorteioNumero} from "./lib/sorteioDoNumero";

let input = document.querySelector("#number");
const mask = IMask(input, {
  mask: Number,
  min: 0,
  max: 10,
});

input.addEventListener("click", () => {
  input.value = "";
  mask.updateValue();
}); 

• javascript
• html
• imaskjs

Share Improve this question Follow edited Jun 17, 2023 at 0:42 Skully 3,12633 gold badges2727 silver badges4141 bronze badges asked Feb 25, 2023 at 0:23 RafaelRafael 1311 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You are seeing the warning regarding the value being out of sync because you are updating the input field's value directly on the DOM element rather than using the IMask object, this updates the input field however IMask cannot see this change.

The correct way to update the value of an IMask input is to directly update the value of the .value property of the IMask object you created:

import IMask from "imask";
import {contador} from "./lib/contador";
import {NewGame} from "./lib/novoJogo";
import {SorteioNumero} from "./lib/sorteioDoNumero";

let input = document.querySelector("#number"); // This is your raw DOM element.

const mask = IMask(input, { // This is your IMask object.
  mask: Number,
  min: 0,
  max: 10,
});

input.addEventListener("click", () => {
    mask.value = ""; // Clear IMask object value.
});

See 'Get/set value and unmasked value' here: https://imask.js/guide.html#masked-base

In your case, you should just write it like this:

input.addEventListener("click", () => {
  mask.updateValue("");
}); 

instead of

input.addEventListener("click", () => {
  input.value = "";
  mask.updateValue();
}); 

I'm trying to make my IMask input update its value to be cleared when it is clicked but IMask is throwing a warning:

Element value has changed outside the mask. Sync the mask using mask.updateValue() for it to work correctly.

I've tried to use all of the ways I could find to update the value, such as mask.updateValue() though I still see the error.

import IMask from "imask";
import {contador} from "./lib/contador";
import {NewGame} from "./lib/novoJogo";
import {SorteioNumero} from "./lib/sorteioDoNumero";

let input = document.querySelector("#number");
const mask = IMask(input, {
  mask: Number,
  min: 0,
  max: 10,
});

input.addEventListener("click", () => {
  input.value = "";
  mask.updateValue();
}); 

I'm trying to make my IMask input update its value to be cleared when it is clicked but IMask is throwing a warning:

Element value has changed outside the mask. Sync the mask using mask.updateValue() for it to work correctly.

I've tried to use all of the ways I could find to update the value, such as mask.updateValue() though I still see the error.

import IMask from "imask";
import {contador} from "./lib/contador";
import {NewGame} from "./lib/novoJogo";
import {SorteioNumero} from "./lib/sorteioDoNumero";

let input = document.querySelector("#number");
const mask = IMask(input, {
  mask: Number,
  min: 0,
  max: 10,
});

input.addEventListener("click", () => {
  input.value = "";
  mask.updateValue();
}); 

• javascript
• html
• imaskjs

Share Improve this question Follow edited Jun 17, 2023 at 0:42 Skully 3,12633 gold badges2727 silver badges4141 bronze badges asked Feb 25, 2023 at 0:23 RafaelRafael 1311 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You are seeing the warning regarding the value being out of sync because you are updating the input field's value directly on the DOM element rather than using the IMask object, this updates the input field however IMask cannot see this change.

The correct way to update the value of an IMask input is to directly update the value of the .value property of the IMask object you created:

import IMask from "imask";
import {contador} from "./lib/contador";
import {NewGame} from "./lib/novoJogo";
import {SorteioNumero} from "./lib/sorteioDoNumero";

let input = document.querySelector("#number"); // This is your raw DOM element.

const mask = IMask(input, { // This is your IMask object.
  mask: Number,
  min: 0,
  max: 10,
});

input.addEventListener("click", () => {
    mask.value = ""; // Clear IMask object value.
});

See 'Get/set value and unmasked value' here: https://imask.js/guide.html#masked-base

In your case, you should just write it like this:

input.addEventListener("click", () => {
  mask.updateValue("");
}); 

instead of

input.addEventListener("click", () => {
  input.value = "";
  mask.updateValue();
}); 

本文标签： htmlJavaScript How to update the value of IMask elementStack Overflow