Switch to the next group automatically when key does not match current group

[fiedl]

Consider a mask "AAA-BB 9999":

let maskPattern = "A{1,3}-B{1,2} 9{1,4}"

let inputMask = new Inputmask({
  mask: maskPattern,
  definitions: {
    "9": { validator: "[0-9]" },
    "A": { validator: "[A-Za-z]", casing: 'upper' }
    "B": { validator: "[A-Za-z]", casing: 'upper' }
  },
  // ...

When the cursor is in the second group "BB" and the user types a number, which is not allowed in the second group, then I would like to move the cursor to the third group, which does allow numbers, and enter the number there.

Can you give me a hint how I can achieve this behaviour? Thank you!

Something similar works already: If the cursor is in the first group and the user types "-" then the cursor moves on to the second group.

[RobinHerbots]

@fiedl ,

Which version are you using? I tried your mask and typed A-B0 and I get A-B 0

[fiedl]

I'm on inputmask@5.0.9. I've posted my workaround here. Thanks for your quick reply and also for this awesome package!

[fiedl]

I'm on inputmask@5.0.9. I've found a workaround in the meantime, which is not perfect, but an acceptable start for my usecase.

inputmask@5.0.9

inputmask-5.0.9.mov

inputmask@5.0.9 using callbacks

inputmask-with-patch.mov

In both videos, the same keystrokes are used.

With the following event handlers, I'm checking whether an alphanumeric keystroke changes the input field; if not, I'm sending a space keystroke to switch input group, first.

this.inputTarget.addEventListener('keydown', (event) => {
  this.last_value = this.inputTarget.value
})

inputMask.mask(this.inputTarget)

this.inputTarget.addEventListener('keyup', (event) => {
  if (this.emulatingEvents) return

  if (/^[a-zA-Z0-9]$/.test(event.key)) {
    if (this.last_value == this.inputTarget.value) {
      this.emulatingEvents = true
      const spaceKeyDownEvent = new KeyboardEvent('keydown', { key: ' ' })
      this.inputTarget.dispatchEvent(spaceKeyDownEvent)
      const spaceKeyUpEvent = new KeyboardEvent('keyup', { key: ' ' })
      this.inputTarget.dispatchEvent(spaceKeyUpEvent)
      const otherKeyDownEvent = new KeyboardEvent('keydown', { key: event.key })
      this.inputTarget.dispatchEvent(otherKeyDownEvent)
      const otherKeyUpEvent = new KeyboardEvent('keyup', { key: event.key })
      this.inputTarget.dispatchEvent(otherKeyUpEvent)
      this.emulatingEvents = false
    }
  }

[RobinHerbots]

With the current beta version this just works out-of-the-box