search

insin / react-maskedinput

Masked <input/> React component
http://insin.github.io/react-maskedinput/
MIT License
730 stars 197 forks source link

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

Open wolfflow opened 6 years ago

wolfflow commented 6 years ago

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!