InputItem 文本输入

用于接受单行文本。

规则

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

代码演示

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

import { List, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';
let BasicInputExample = React.createClass({
  render() {
    const { getFieldProps } = this.props.form;
    return (<List>
      <InputItem
        placeholder="请输入"
        data-seed="logId"
      >标题</InputItem>
      <InputItem
        {...getFieldProps('control')}
        placeholder="请输入（受控）"
      >标题</InputItem>
      <InputItem
        {...getFieldProps('inputclear')}
        clear
        placeholder="输入会显示清除按钮"
      >标题</InputItem>
      <InputItem
        {...getFieldProps('input3')}
        placeholder="无 label"
      />
      <InputItem
        {...getFieldProps('inputtitle2')}
        placeholder="标题可自定义"
      >
        <div style={{ backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/zumwvwrngNMGSWe.png)', backgroundSize: 'cover', height: '0.44rem', width: '0.44rem' }} />
      </InputItem>
      <InputItem
        {...getFieldProps('label8')}
        placeholder="限制标题显示的长度"
        labelNumber={3}
      >标题过长</InputItem>
      <InputItem
        {...getFieldProps('preice')}
        placeholder="0.00"
        extra="元"
      >价格</InputItem>
      <InputItem
        {...getFieldProps('upload')}
        extra={<img src="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png" />}
      >上传照片</InputItem>
      <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="点击会弹出数字键盘"
      >数字键盘</InputItem>
      <InputItem
        value="不可编辑"
        editable={false}
      >姓名</InputItem>
      <InputItem
        value="这个是禁用状态的样式"
        disabled
      >姓名</InputItem>
    </List>);
  },
});
BasicInputExample = createForm()(BasicInputExample);
ReactDOM.render(<BasicInputExample />, mountNode);

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

API ( 适用平台：WEB、React-Native )

成员	说明	类型	默认值
prefixListCls	列表 className 前缀	String	`am-list`
type	银行卡`bankCard`,手机号`phone`（此时最大长度固定为11,`maxLength`设置无效）,密码`password`, 数字`number`（尽量唤起数字键盘）	String	`text`
name	input的name	String	无
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	定宽枚举值：`num * @input-label-width: 34px`，可用`2-7`之间的数字，一般(不能保证全部)能对应显示出相应个数的中文文字(不考虑英文字符)	number	`4`
updatePlaceholder (`web only`)	当清除内容时，是否将清除前的内容替换到 placeholder 中	bool	false
prefixListCls (`web only`)	列表 className 前缀	String	`am-list`
name (`web only`)	input 的 name	String	无

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

InputItem文本输入

InputItem 文本输入

规则

代码演示

API ( 适用平台：WEB、React-Native )