Editing in the middle of the string

[reintroducing]

I lied, I found one more issue that I see common to many input maskers :)

Let's say I enter a 16 digit credit card. Now I realize I messed up the second set of four numbers and need to edit them. I highlight that set, start typing, the first number gets replaced and the carat jumps to the end of the set and I'm now editing character 14. I'd expect that I can continue editing in place at character 5.

[estelle]

I was just discussion this. Usually people miss one character, not several, so the going to the end is by design. My original version has caret placement memory - i don't think i committed that. I guess I could add that back in as an option.

[reintroducing]

@estelle I think that would be a great option to add so that those that want it can enable it.

[jt3k]

plz implement this option

[PixelZombie]

Definitely not the best solution. More quick'n'dirty ;-) I extended the handleValueChange function:

handleValueChange : function (e) {
    var id = e.target.getAttribute('id');
    var cursorPosBefore = e.target.selectionStart;
    var cursorPosAfter = e.target.selectionStart;

    if(e.target.value == document.querySelector('#' + id + 'Mask i').innerHTML) {
      return; // Continue only if value hasn't changed
    }

    document.getElementById(id).value = this.handleCurrentValue(e);
    document.getElementById(id + 'Mask').innerHTML = this.setValueOfMask(e);

    cursorPosAfter = e.target.selectionStart; // update cursor pos

    // when cursor is jumping over spaces
    if (cursorPosAfter - cursorPosBefore > 1 ) {
      document.getElementById(id).selectionStart = cursorPosBefore;
      document.getElementById(id).selectionEnd = cursorPosBefore;
    }
  },

[Gcamara14]

I would say this is not an enhancement BUT a violation of a WCAG principle - WCAG SC 3.2.2: On Input (Level A) --- Moving a user's focus can be especially jarring and it happens as soon as an element gets deleted in the middle of the string.

-- Here's my take on accessible input masking: https://giovanicamara.com/blog/accessible-input-masking/