反应-输入-任务

React 的输入遮盖组件 。 注意了UX系统 与IE8+兼容.

演示

目录

• 安装
• 属性
• 实例
• 已知问题

安装

npm install react-input-mask --save

也可以不用模块捆绑器

<!-- Load React first -->
<script src="https://unpkg.com/react/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
<!-- Will be exported to window.ReactInputMask -->
<script src="https://unpkg.com/react-input-mask/dist/react-input-mask.min.js"></script>

属性

mask 数字 : string

口罩绳. 默认格式字符为:
9数字 : 0-9
a数字 : A-Z, a-z
*数字 : A-Z, a-z, 0-9

任何角色都可以用回击来逃脱. 在联署材料中,这将成为双重反弹。 例如,一个带有不可移动前缀+49的德国电话口罩将看起来像 mask="+4\9 99 999 99" 或者说 mask={'+4\\9 99 999 99'}

maskChar 数字 : string

覆盖口罩未填充部分的字符 。 默认字符为" ". 如果设置为无效或空字符串,未填充的部分将像普通输入一样为空.

formatChars 数字 : object

定义以字符为键的格式字符,以对应的RegExp字符串为值. 默认 :

{
  '9': '[0-9]',
  'a': '[A-Za-z]',
  '*': '[A-Za-z0-9]'
}

alwaysShowMask 数字 : boolean

当输入为空且没有焦点时显示掩码 .

inputRef 数字 : function

使用 inputRef 改为 ref 如果您需要输入节点来管理焦点、选择等.

实验: 火:

以下道具被认为是实验性的,因为它们更容易出问题并有可能在未来被改变. 谨慎使用.

beforeMaskedValueChange 数字 : function

如果你需要实施更复杂的伪装行为,你可以提供 beforeMaskedValueChange 函数可以更改被遮蔽的值和光标位置,然后应用到输入中. beforeMaskedValueChange 接收以下参数:

1. 新状态 (对象):新输入状态. 包含 value 财务报告和审定财务报表 selection 字段. selection 对输入模糊或当在输入上架前调用函数时无效。 示例 { value: '12/1_/____', selection: { start: 4, end: 4 } }
2. 旧状态 (对象):变化前输入状态. 包含 value 财务报告和审定财务报表 selection 字段. selection 对于输入焦点或当在输入上架前调用函数时,则无效.
3. 用户输入 (字符串):原始输入或粘接字符串. null 如果用户没有输入任何东西(例如由于道具更改而被删除或重新收发所触发).
4. 遮罩选项 (对象):口罩选项. 示例

{
  mask: '99/99/9999',
  maskChar: '_',
  alwaysShowMask: false,
  formatChars: {
    '9': '[0-9]',
    'a': '[A-Za-z]',
    '*': '[A-Za-z0-9]'
  },
  permanents: [2, 5] // permanents is an array of indexes of the non-editable characters in the mask
}

beforeMaskedValueChange 对象必须返回以下字段:

1. 价值 (字符串):新值.
2. 选择 (对象):新选择. 若为 selection 内 newState 论据无效,也必须无效.

请注意: beforeMaskedValueChange 执行次数多于 onChange 并必须是纯洁的.

children 数字 : function

注:为使这一特点更加可靠,请说明贵国在下列情况下的使用情况: 这个问题

使用另一个组件而不是常规 <input /> 传票作为孩子的功能。 函数收到 props 包含不为反应-输入-掩体内部使用道具的参数。 也就是说,除了以下的道具以外,每一道道具都通过: onChange, (中文(简体) ), onPaste, (中文(简体) ), onMouseDown, (中文(简体) ), onFocus, (中文(简体) ), onBlur, (中文(简体) ), value, (中文(简体) ), disabled, (中文(简体) ), readOnly。这些属性如果使用的话,应该总是直接传递给反应-输入-掩码而不是孩子,不应该改变chldren的功能.

import React from 'react';
import InputMask from 'react-input-mask';
import MaterialInput from '@material-ui/core/Input';

// Will work fine
const Input = (props) => (
  <InputMask mask="99/99/9999" value={props.value} onChange={props.onChange}>
    {(inputProps) => <MaterialInput {...inputProps} type="tel" disableUnderline />}
  </InputMask>
);

// Will throw an error because InputMask's and children's onChange aren't the same
const InvalidInput = (props) => (
  <InputMask mask="99/99/9999" value={props.value}>
    {(inputProps) => <MaterialInput {...inputProps} type="tel" disableUnderline onChange={props.onChange} />}
  </InputMask>
);

实例

import React from 'react';
import InputMask from 'react-input-mask';

class PhoneInput extends React.Component {
  render() {
    return <InputMask {...this.props} mask="+4\9 99 999 99" maskChar=" " />;
  }
}

ZIP码的口罩. 在MaskedValue Change之前, 如果用户没有输入则省略后缀:

import React from 'react';
import InputMask from 'react-input-mask';

class Input extends React.Component {
  state = {
    value: ''
  }

  onChange = (event) => {
    this.setState({
      value: event.target.value
    });
  }

  beforeMaskedValueChange = (newState, oldState, userInput) => {
    var { value } = newState;
    var selection = newState.selection;
    var cursorPosition = selection ? selection.start : null;

    // keep minus if entered by user
    if (value.endsWith('-') && userInput !== '-' && !this.state.value.endsWith('-')) {
      if (cursorPosition === value.length) {
        cursorPosition--;
        selection = { start: cursorPosition, end: cursorPosition };
      }
      value = value.slice(0, -1);
    }

    return {
      value,
      selection
    };
  }

  render() {
    return <InputMask mask="99999-9999" maskChar={null} value={this.state.value} onChange={this.onChange} beforeMaskedValueChange={this.beforeMaskedValueChange} />;
  }
}

已知问题

自动填充

浏览器的自动填充需要输入中的空值或完全匹配自动填充值开头的值。 一,即自动填充值"+1(555)123-4567"将与"+1"或"+1"(5)相通,但不会与"+1(-)---"或"1(555)"相通. 有几种可能的解决办法:

1. 设定 maskChar 将“+1”后空格改为空格 beforeMaskedValueChange 如果没有再输入数字.
2. 仅在值不为空时应用掩码 。 一般来说,这是最可靠的解决方案,因为我们无法确定自动填充值的格式.
3. 在口罩中使用较少格式化.

请注意,这可能导致用户体验更差(如果输入为空,我是否应该输入+1?). 你应该选择对用户更为重要的内容——平滑打字体验或自动填充. 电话和ZIP代码输入极有可能被自动填充,而关心这个问题是一个好主意,而两个要素授权中的安全确认代码则根本不应该考虑自动填充.

谢谢

感谢 浏览器Stack 帮助在真实设备上进行测试