react-maskedinput icon indicating copy to clipboard operation
react-maskedinput copied to clipboard

Input type number

Open luizbon opened this issue 8 years ago • 3 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.

luizbon avatar Dec 21 '16 06:12 luizbon

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

nic avatar Dec 30 '16 17:12 nic

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

nic avatar Dec 30 '16 20:12 nic

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 : ''}`}
              />

tbaustin avatar Jun 26 '18 16:06 tbaustin