InputItem 文本输入

用于接受单行文本。

规则

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

代码演示

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

import { List, InputItem, Button } from 'antd-mobile';
import { createForm } from 'rc-form';
class H5NumberInputExample extends React.Component {
  state = {
    moneyfocused: false,
    type: 'money',
  }
  render() {
    const { getFieldProps } = this.props.form;
    const { type } = this.state;
    return (
      <div>
        <List renderHeader={() => 'Format'}>
          <InputItem
            {...getFieldProps('money', {
              initialValue: '222',
            })}
            type={type}
            placeholder="money keyboard"
            clear
            maxLength={10}
            locale={{ confirmLabel: '计算' }}
            onBlur={value => console.log(value)}
          />
          <InputItem placeholder="22">普通键盘</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"
            onFocus={() => {
              this.setState({
                moneyfocused: false,
              });
            }}
            focused={this.state.moneyfocused}
          >数字键盘</InputItem>
          <List.Item>
            <div
              style={{ width: '100%', color: '#108ee9', textAlign: 'center' }}
              onClick={() => {
                this.setState({
                  moneyfocused: true,
                });
              }}
            >
              click to focus
            </div>
          </List.Item>
          <InputItem
            {...getFieldProps('moneynatural', {
              normalize: (v) => {
                if (v && (v.charAt(0) === '0' || v.indexOf('.') >= 0)) {
                  return v.replace(/^0*(\d*).*$/, '$1');
                }
                return v;
              },
            })}
            type={type}
            placeholder="money format natural"
          >正整数</InputItem>
        </List>
        <Button
          onClick={() => {
            this.setState({
              type: 'text',
            });
          }}
        >
          重置为电话类型
        </Button>
      </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 {
  state = {
    focused: false,
    focused1: false,
  }
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <List renderHeader={() => 'Customize to focus'}>
          <InputItem
            {...getFieldProps('autofocus')}
            clear
            placeholder="auto focus in Alipay client"
            autoFocus
          >标题</InputItem>
          <InputItem
            {...getFieldProps('focus')}
            clear
            placeholder="click the button below to focus"
            focused={this.state.focused}
            onFocus={() => {
              this.setState({
                focused: false,
              });
            }}
          >标题</InputItem>
          <List.Item>
            <div
              style={{ width: '100%', color: '#108ee9', textAlign: 'center' }}
              onClick={() => {
                this.setState({
                  focused: true,
                });
              }}
            >
              click to focus
            </div>
          </List.Item>
        </List>
        <List renderHeader={() => 'Whether is controlled'}>
          <InputItem
            {...getFieldProps('control')}
            placeholder="Hello World"
          >受控组件</InputItem>
          <InputItem
            placeholder="please input content"
            data-seed="logId"
          >非受控组件</InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'click label to focus input'}>
          <InputItem
            placeholder="click label to focus input"
            focused={this.state.focused1}
            onFocus={() => {
              this.setState({
                focused1: false,
              });
            }}
          ><div onClick={() => this.setState({ focused1: true })}>标题</div></InputItem>
        </List>
        <List renderHeader={() => 'Show clear icon'}>
          <InputItem
            {...getFieldProps('inputclear')}
            clear
            placeholder="displayed clear icon 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: '0.44rem', width: '0.44rem' }} />
          </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>
        </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

适用平台：WEB、React-Native

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

属性	说明	类型	默认值
type	银行卡`bankCard`,手机号`phone`（此时最大长度固定为11,`maxLength`设置无效）,密码`password`, 数字`number`（尽量唤起数字键盘，纯web环境目前无法唤起`带小数点`的数字键盘，如有此需求，目前需使用默认键盘并通过onChange自行处理）,`money`带小数点的数字键盘（纯h5实现, `Web Only`）	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`,`value`设置才生效)	bool	false
maxLength	最大长度	number	无
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	无
labelNumber	标签的文字个数，可用`2-7`之间的数字	number	`5`
autoFocus	页面初始化时Input自动获取光标,每个页面只有一个Input的autpFocus会生效。（不保证所有浏览器都生效）	bool	false
focused	页面运行过程中,Input获取光标,当Input获取光标（`focused`更新为true）后，需要在`onFocus`或者`onBlur`时再次将该属性设置为false。	bool	false
updatePlaceholder (`web only`)	当清除内容时，是否将清除前的内容替换到 placeholder 中	bool	false
prefixListCls (`web only`)	列表 className 前缀	String	`am-list`
name (`web only`)	input 的 name	String	无
locale	国际化，可覆盖全局`LocaleProvider`的配置, 当`type`为`money`，可以自定义确认按钮的文案。	Object: { confirmLabel }	无

更多 react-native InputItem 属性请参考 react-native TextInput (http://facebook.github.io/react-native/docs/textinput.html)

InputItem文本输入

InputItem 文本输入

规则

代码演示

API