限制跳跃光标

时间:2019-06-24 12:32:52

标签: reactjs input-mask

我已经屏蔽了输入,只要在其中输入内容,光标就会跳到输入的结尾。 如果重要的话,我也可以在redux-form中使用它

import InputMask from 'react-input-mask'
class Phone extends React.Component {
    ...
    onChangeValue = (i, { target }) => {
    const { value } = this.state
    const { input: { onChange } } = this.props
    const newValue = value
    newValue[i] = target.value
    this.setState({ value: newValue })
    onChange({ ...newValue })
  }
  render() {
    const { input } = this.props
    const { numbers, value } = this.state
    return (
      <React.Fragment>
        {[...Array(numbers)].map((_, i) => (
          <div key={`Phone${i + 1}`}>
            <InputMask
              mask="+7 (999) 999-99-99"
              {...this.props}
              onChange={e => this.onChangeValue(i, e)}
              onBlur={() => input.onBlur(input.value)}
              value={value[i]}
              disableUnderline
              alwaysShowMask
            >
              {({ input, onChange, onBlur, value }) => (
                <input
                  {...input}
                  onChange={onChange || input.onChange}
                  onBlur={onBlur || input.onBlur}
                  value={value || input.value}
                  type="phone"
                />
              )}
            </InputMask>
            ...
      </React.Fragment>
    )
  }
}

我需要一些函数来限制光标的跳转 有什么解决办法吗?

0 个答案:

没有答案