javascriptimaskjs

How can I define a "anything" mask with imask.js?


Consider the following minimal example. I'm using imask.js to restrict input field values. But sometimes I just don't care about the value and would like to allow anything.

If I don't set a value for the mask property it throws an error because it is required in the configuration:

Uncaught Error: mask property should be defined at maskedClass

So I figured out a workaround with a custom block mask: {}. But it still shows warnings and doesn't look like a solid solution to me.

What is the correct way to define a mask that allows any value?

IMask(document.getElementById("input"), {
  mask: "Digit here: 0. Anything here: anything",
  lazy: false,
  blocks: {
    anything: {
      mask: {}
    }
  }
});
input { width: 50vw; padding: 10px; font-size: large; box-sizing: border-box; }
<script src="https://unpkg.com/imask"></script>
<input id="input"/>


Solution

  • As suggested by @GetSet, you could use a RegExp mask that matches anything :

    IMask(document.getElementById("input"), {
      mask: "Digit here: 0. Anything here: anything",
      lazy: false,
      blocks: {
        anything: {
          mask: /(.*?)/
        }
      }
    });
    input { width: 50vw; padding: 10px; font-size: large; box-sizing: border-box; }
    <script src="https://unpkg.com/imask"></script>
    <input id="input"/>

    See this question if you want more examples of RegExp that matches anything.