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

Input type number

luizbon opened this issue · comments

When the input type is number it breaks with the following error:

Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection

This scenario is needed for a mobile website to bring number keyboard.

This is a bug "created" by W3C in the type=number implementation.
They simple remove setSelectionRange, selectionStart, selectionEnd mothods from the specification.
If you agree with me and think that its a erro, please vote for the https://www.w3.org/Bugs/Public/show_bug.cgi?id=24796

The work around is to use the type="tel" that support selectionStart, selectionEnd.. https://html.spec.whatwg.org/#the-input-element

Is there a work around for this? Anyway to make number input work with something like:

             <MaskedInput
                mask={
                  this.state.cardType === 'american-express'
                    ? '1111 111111 11111'
                    : '1111 1111 1111 1111'
                }
                placeholderChar=""
                type={field.type}
                className={field.class}
                name={field.name}
                ref={ref => (this[field.name] = ref)}
                onChange={this[func]}
                onFocus={e => {
                  e.target.placeholder = ''
                }}
                onBlur={e => {
                  e.target.placeholder = 'Card Number'
                  this.validateCC(e)
                  this.validate(e)
                }}
                value={user[type][field.formattedName]}
                placeholder={`${field.label} ${field.span ? field.span : ''}`}
              />