react-maskedinput
react-maskedinput copied to clipboard
Input type number
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 : ''}`}
/>