insin / react-maskedinput

Masked <input/> React component

Home Page:http://insin.github.io/react-maskedinput/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Shifting the existing input instead of rewriting -- possibly need an option

wolfflow opened this issue · comments

Hello !

Demo (video): http://take.ms/iJkM7

A brief description of the expectations below:

  1. I fill in an IBAN. It is being formatted like:
    1234 ABCD EFGH 0123
  2. Then I move the caret to some character in the middle of masked input (let it be right after B symbol ):
    1234 ABCD EFGH 0123
    .......^
  3. Then I press backspace and get
    1234 ACDE FGH0 123
    ......^
  4. After that I try to type B once again and get
    123 ABDE FGH0 123 instead of naively) expected 1234 ABCD EFGH 0123

The settings of the field are following:

{
    mask: '#### #### #### #### #### #### #### #### ##',
    size: 42,
    placeholderChar: ' ',
    placeholderFixed: '#### #### #### #### #### #### #### #### ##',
    hidePlaceholder: true,
    isRevealingMask: true
},

P.S. Doing this without a placeholderFixed and a visible placeholder wont do, as IBAN is a format of arbitrary size, so when I enter something like AD12 0001 2030 2003 5910 0100 and then try to change it to like AT61 1904 3002 3457 3201 (which is also a valid IBAN) I will see AT61 1904 3002 3457 3201 XXXX where X is a placeholder char -- it won't disappear even if I clean all input.

Thanks in advance!