InputItem 文本输入

用于接受单行文本。

规则

支持通过键盘或者剪切板输入文本。
通过光标可以在水平方向进行移动。
对特定格式的文本进行处理，eg：隐藏密码。

代码演示

受控组件建议使用(rc-form )

import { List, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';
// 通过自定义 moneyKeyboardWrapProps 修复虚拟键盘滚动穿透问题
// https://github.com/ant-design/ant-design-mobile/issues/307
// https://github.com/ant-design/ant-design-mobile/issues/163
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let moneyKeyboardWrapProps;
if (isIPhone) {
  moneyKeyboardWrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
class H5NumberInputExample extends React.Component {
  state = {
    type: 'money',
  }
  render() {
    const { getFieldProps } = this.props.form;
    const { type } = this.state;
    return (
      <div>
        <List>
          <InputItem
            {...getFieldProps('money3')}
            type={type}
            defaultValue={100}
            placeholder="start from left"
            clear
            moneyKeyboardAlign="left"
            moneyKeyboardWrapProps={moneyKeyboardWrapProps}
          >光标在左</InputItem>
          <InputItem
            type={type}
            placeholder="start from right"
            clear
            onChange={(v) => { console.log('onChange', v); }}
            onBlur={(v) => { console.log('onBlur', v); }}
            moneyKeyboardWrapProps={moneyKeyboardWrapProps}
          >光标在右</InputItem>
          <InputItem
            {...getFieldProps('money2', {
              normalize: (v, prev) => {
                if (v && !/^(([1-9]\d*)|0)(\.\d{0,2}?)?$/.test(v)) {
                  if (v === '.') {
                    return '0.';
                  }
                  return prev;
                }
                return v;
              },
            })}
            type={type}
            placeholder="money format"
            ref={el => this.inputRef = el}
            onVirtualKeyboardConfirm={v => console.log('onVirtualKeyboardConfirm:', v)}
            clear
            moneyKeyboardWrapProps={moneyKeyboardWrapProps}
            disabledKeys={['.', '0', '3']}
          >数字键盘</InputItem>
          <List.Item>
            <div
              style={{ width: '100%', color: '#108ee9', textAlign: 'center' }}
              onClick={() => this.inputRef.focus()}
            >
              click to focus
            </div>
          </List.Item>
        </List>
      </div>
    );
  }
}
const H5NumberInputExampleWrapper = createForm()(H5NumberInputExample);
ReactDOM.render(<H5NumberInputExampleWrapper />, mountNode);

.demoTitle:before,
.demoTitle:after {
  border-bottom: none;
}

基本

受控组件建议使用(rc-form )

import { List, InputItem, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';
class BasicInputExample extends React.Component {
  componentDidMount() {
    // this.autoFocusInst.focus();
  }
  handleClick = () => {
    this.inputRef.focus();
  }
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <List renderHeader={() => 'Customize to focus'}>
          <InputItem
            {...getFieldProps('autofocus')}
            clear
            placeholder="auto focus"
            ref={el => this.autoFocusInst = el}
          >标题</InputItem>
          <InputItem
            {...getFieldProps('focus')}
            clear
            placeholder="click the button below to focus"
            ref={el => this.inputRef = el}
          >标题</InputItem>
          <List.Item>
            <div
              style={{ width: '100%', color: '#108ee9', textAlign: 'center' }}
              onClick={this.handleClick}
            >
              click to focus
            </div>
          </List.Item>
        </List>
        <List renderHeader={() => 'Whether is controlled'}>
          <InputItem
            {...getFieldProps('control')}
            placeholder="controled input"
          >受控组件</InputItem>
          <InputItem
            defaultValue="Title"
            placeholder="please input content"
            data-seed="logId"
          >非受控组件</InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'Click label to focus input'}>
          <InputItem
            placeholder="click label to focus input"
            ref={el => this.labelFocusInst = el}
          ><div onClick={() => this.labelFocusInst.focus()}>标题</div></InputItem>
        </List>
        <List renderHeader={() => 'Show clear'}>
          <InputItem
            {...getFieldProps('inputclear')}
            clear
            placeholder="displayed clear while typing"
          >标题</InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'Number of words for title'}>
          <InputItem
            {...getFieldProps('label8')}
            placeholder="limited title length"
            labelNumber={5}
          >标题过长超过默认的5个字</InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'Custom title（text / image / empty)'}>
          <InputItem
            {...getFieldProps('input3')}
            placeholder="no label"
          />
          <InputItem
            {...getFieldProps('inputtitle2')}
            placeholder="title can be icon，image or text"
          >
            <div style={{ backgroundImage: 'url(https://zos.alipayobjects.com/rmsportal/DfkJHaJGgMghpXdqNaKF.png)', backgroundSize: 'cover', height: '22px', width: '22px' }} />
          </InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'Customize the extra content in the right'}>
          <InputItem
            {...getFieldProps('preice')}
            placeholder="0.00"
            extra="¥"
          >价格</InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'Format'}>
          <InputItem
            {...getFieldProps('bankCard', {
              initialValue: '8888 8888 8888 8888',
            })}
            type="bankCard"
          >银行卡</InputItem>
          <InputItem
            {...getFieldProps('phone')}
            type="phone"
            placeholder="186 1234 1234"
          >手机号码</InputItem>
          <InputItem
            {...getFieldProps('password')}
            type="password"
            placeholder="****"
          >密码</InputItem>
          <InputItem
            {...getFieldProps('number')}
            type="number"
            placeholder="click to show number keyboard"
          >数字键盘</InputItem>
          <InputItem
            {...getFieldProps('digit')}
            type="digit"
            placeholder="click to show native number keyboard"
          >数字键盘</InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'Not editable / Disabled'}>
          <InputItem
            value="not editable"
            editable={false}
          >姓名</InputItem>
          <InputItem
            value="style of disabled `InputItem`"
            disabled
          >姓名</InputItem>
        </List>
      </div>
    );
  }
}
const BasicInputExampleWrapper = createForm()(BasicInputExample);
ReactDOM.render(<BasicInputExampleWrapper />, mountNode);

.demoTitle:before,
.demoTitle:after {
  border-bottom: none;
}

错误验证

import { List, InputItem, Toast } from 'antd-mobile';
class ErrorInputExample extends React.Component {
  state = {
    hasError: false,
    value: '',
  }
  onErrorClick = () => {
    if (this.state.hasError) {
      Toast.info('Please enter 11 digits');
    }
  }
  onChange = (value) => {
    if (value.replace(/\s/g, '').length < 11) {
      this.setState({
        hasError: true,
      });
    } else {
      this.setState({
        hasError: false,
      });
    }
    this.setState({
      value,
    });
  }
  render() {
    return (
      <div>
        <List renderHeader={() => 'Confirm when typing'}>
          <InputItem
            type="phone"
            placeholder="input your phone"
            error={this.state.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChange}
            value={this.state.value}
          >手机号码</InputItem>
        </List>
      </div>
    );
  }
}
ReactDOM.render(<ErrorInputExample />, mountNode);

.demoTitle:before,
.demoTitle:after {
  border-bottom: none;
}

API

InputItem 必须用 List 组件包裹才能正常使用

属性	说明	类型	默认值
type	可以是银行卡`bankCard`; 手机号`phone`(此时最大长度固定为11,`maxLength`设置无效); 密码`password`; 数字`number`(为了尽量唤起`带小数点`的数字键盘，此类型并不是原生 number，而是`<input type="text" pattern="[0-9]*" />`); `digit`(表示原生的 number 类型); `money`(带小数点的模拟的数字键盘) 以及其他标准 html input type 类型	String	`text`
value	value 值(受控与否参考https://facebook.github.io/react/docs/forms.html)	String	无
defaultValue	设置初始默认值	String	-
placeholder	placeholder	String	''
editable	是否可编辑	bool	true
disabled	是否禁用	bool	false
clear	是否带清除功能(仅`editable`为`true`,`disabled`为`false`才生效)	bool	false
maxLength	最大长度	number	无。除money类型外，仅当text, email, search, password, tel, or url 有效。具体可以查看文档 https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input，以及相关issue https://github.com/ant-design/ant-design-mobile/issues/2966
onChange	change 事件触发的回调函数	(val: string): void	-
onBlur	blur 事件触发的回调函数	(val: string): void	-
onFocus	focus 事件触发的回调函数	(val: string): void	-
error	报错样式	bool	false
onErrorClick	点击报错 icon 触发的回调函数	(e: Object): void	无
extra	右边注释	string or node	''
onExtraClick	extra 点击事件触发的回调函数	(e: Object): void	无
onVirtualKeyboardConfirm	虚拟键盘点击确认时的回调函数	(val: string): void	无
labelNumber	标签的文字个数，可用`2-7`之间的数字	number	`5`
updatePlaceholder	当清除内容时，是否将清除前的内容替换到 placeholder 中	bool	false
prefixListCls	列表 className 前缀	String	`am-list`
name	input 的 name	String	无
moneyKeyboardAlign	文字排版起始方向, 只有 `type='money'` 支持，可选为 `'left'`, `'right'`	String	'right'
moneyKeyboardWrapProps	自定义金额虚拟键盘属性	Object	{}
moneyKeyboardHeader	自定义金额虚拟键盘头部	ReactNode	null
locale	国际化，可覆盖全局`LocaleProvider`的配置, 当`type`为`money`，可以自定义确认按钮的文案。	Object: { confirmLabel }	无
autoAdjustHeight	防止输入框被键盘遮挡。(仅 `type=money`时有效)	bool	false
disabledKeys	禁用部分数字按键(仅 `type=money`时有效)	array	null	null

注意: 不要在受控组件的 onChange 事件中异步设置 value，否则中文输入可能带来问题，相关问题参考。
注意: InputItem 当 type=number 时不支持输入负号, 你可以利用 type=text 来自己实现。
注意: 使用 moneyKeyboardHeader 时，页面中只能有一个 type=money 的 InputItem。

InputItem methods

属性	说明	类型	默认值
focus	使 input 聚焦	(): void	-

InputItem文本输入

InputItem 文本输入

规则

代码演示

API

InputItem methods