InputItem 文本输入

定义／Definition

文本框允许用户输入一行文本。通常可以使用文本框来收集用户的少量文本信息并执行一些直接作用，例如搜索操作。

规则 / Rule

  • 文本框的左侧一般用于表述文本框的含义，而右侧用于展示附加的功能，如书签。

  • 输入内容超出视窗宽度时，文本内容向前缩进。

代码演示

基本

输入框。 

  1. import { List, InputItem } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  4. let BasicInput = React.createClass({
  5.   onClick() {
  6.     console.log(this.props.form.getFieldsValue());
  7.   },
  8.   render() {
  9.     const { getFieldProps } = this.props.form;
  11.     return (<div>
  12.       <List>
  13.         <List.Header>线型</List.Header>
  14.         <List.Body>
  15.           <InputItem
  16.             {...getFieldProps('input1')}
  17.             placeholder="内容"
  18.             clear
  19.             maxLength={10}
  20.             onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  21.             onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  22.           >基本</InputItem>
  23.           <InputItem
  24.             {...getFieldProps('input2', {
  25.               initialValue: '标签可以是node',
  26.             })}
  27.             placeholder="标签可以是node"
  28.           ><div style={{ backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/zumwvwrngNMGSWe.png)', backgroundSize: 'cover', height: '22px', width: '22px' }} /></InputItem>
  29.           <InputItem
  30.             value="仅供展示:editable={false}"
  31.             editable={false}
  32.           >不可编辑</InputItem>
  33.           <InputItem
  34.             {...getFieldProps('input3', {
  35.               initialValue: '无标签',
  36.             })}
  37.             clear
  38.             placeholder="内容"
  39.           />
  40.           <InputItem
  41.             {...getFieldProps('input4')}
  42.             clear
  43.             placeholder="extra"
  44.             extra="元"
  45.           >带注释</InputItem>
  46.           <InputItem
  47.             {...getFieldProps('input5')}
  48.             name="camera"
  49.             placeholder="注释可以是node"
  50.             clear
  51.             extra={<img src="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png" width="22" height="22" />}
  52.           >带注释</InputItem>
  53.           <InputItem
  54.             {...getFieldProps('input6', {
  55.               initialValue: '输入框',
  56.             })}
  57.             clear
  58.             placeholder="clear"
  59.           >带清除</InputItem>
  60.           <InputItem
  61.             {...getFieldProps('input7', {
  62.               initialValue: '校验出错',
  63.             })}
  64.             error
  65.             errorMsg="校验出错"
  66.             clear
  67.             placeholder="内容"
  68.           >报错样式</InputItem>
  69.           <InputItem
  70.             {...getFieldProps('input8', {
  71.               initialValue: '',
  72.             })}
  73.             error
  74.             onErrorClick={() => { alert(111); }}
  75.             placeholder="内容"
  76.             clear
  77.             extra={<img src="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png" width="22" height="22" />}
  78.           >报错样式</InputItem>
  79.         </List.Body>
  80.       </List>
  81.       <List>
  82.         <List.Header>两个字标签</List.Header>
  83.         <List.Body>
  84.           <InputItem
  85.             {...getFieldProps('label3')}
  86.             placeholder="内容"
  87.             clear
  88.             maxLength={10}
  89.             labelNumber={2}
  90.             onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  91.             onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  92.           >姓名</InputItem>
  93.         </List.Body>
  94.       </List>
  95.       <List>
  96.         <List.Header>三个字标签</List.Header>
  97.         <List.Body>
  98.           <InputItem
  99.             {...getFieldProps('label3')}
  100.             placeholder="内容"
  101.             clear
  102.             maxLength={10}
  103.             labelNumber={3}
  104.             onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  105.             onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  106.           >校验码</InputItem>
  107.         </List.Body>
  108.       </List>
  109.       <List>
  110.         <List.Header>四个字标签(默认)</List.Header>
  111.         <List.Body>
  112.           <InputItem
  113.             {...getFieldProps('label4')}
  114.             placeholder="内容"
  115.             clear
  116.             maxLength={10}
  117.             onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  118.             onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  119.           >四字标签</InputItem>
  120.         </List.Body>
  121.       </List>
  122.       <List>
  123.         <List.Header>五个字标签</List.Header>
  124.         <List.Body>
  125.           <InputItem
  126.             {...getFieldProps('label5')}
  127.             placeholder="内容"
  128.             clear
  129.             maxLength={10}
  130.             labelNumber={5}
  131.             onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  132.             onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  133.           >五个字标签</InputItem>
  134.         </List.Body>
  135.       </List>
  136.       <List>
  137.         <List.Header>六个字标签</List.Header>
  138.         <List.Body>
  139.           <InputItem
  140.             {...getFieldProps('label6')}
  141.             placeholder="内容"
  142.             clear
  143.             maxLength={10}
  144.             labelNumber={6}
  145.             onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  146.             onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  147.           >六个字标签六</InputItem>
  148.         </List.Body>
  149.       </List>
  150.       <List>
  151.         <List.Header>七个字标签</List.Header>
  152.         <List.Body>
  153.           <InputItem
  154.             {...getFieldProps('label6')}
  155.             placeholder="内容"
  156.             clear
  157.             maxLength={10}
  158.             labelNumber={7}
  159.             onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  160.             onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  161.           >七个字标签七个</InputItem>
  162.         </List.Body>
  163.       </List>
  164.       <List>
  165.         <List.Header>有边框,本期不实现</List.Header>
  166.         <List.Body>
  167.           <InputItem
  168.             {...getFieldProps('zzzz', {
  169.               initialValue: '',
  170.               valuePropName: 'value',
  171.             })}
  172.             placeholder="内容"
  173.             clear
  174.             maxLength={10}
  175.             onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  176.             onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  177.           >五个字标签</InputItem>
  178.         </List.Body>
  179.       </List>
  180.     </div>);
  181.   },
  182. });
  184. BasicInput = createForm()(BasicInput);
  185. ReactDOM.render(<BasicInput />, mountNode);

格式

支持银行卡（format="bankCard"）,手机号码（format="phone"）,密码（format="password"）,数字（format="number",尽量唤起数字键盘）四种类型的格式 

  1. import { List, InputItem } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  4. let FormatExample = React.createClass({
  5.   render() {
  6.     const { getFieldProps } = this.props.form;
  7.     return (<List>
  8.       <List.Header>格式</List.Header>
  9.       <List.Body>
  10.         <InputItem
  11.           {...getFieldProps('bankCard', {
  12.             initialValue: '8888 8888 8888 8888',
  13.           })}
  14.           format="bankCard"
  15.           placeholder="8888 8888 8888 8888"
  16.           clear
  17.           onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  18.           onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  19.         >银行卡</InputItem>
  20.         <InputItem
  21.           {...getFieldProps('phone', {
  22.             initialValue: '186 1234 1234',
  23.           })}
  24.           format="phone"
  25.           placeholder="186 1234 1234"
  26.           clear
  27.           onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  28.           onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  29.         >手机号码</InputItem>
  30.         <InputItem
  31.           {...getFieldProps('password', {
  32.             initialValue: '123131',
  33.           })}
  34.           format="password"
  35.           placeholder="****"
  36.           clear
  37.           onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  38.           onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  39.         >密码</InputItem>
  40.         <InputItem
  41.           {...getFieldProps('number', {
  42.             initialValue: '123131',
  43.           })}
  44.           format="number"
  45.           placeholder="123131"
  46.           clear
  47.           onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  48.           onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  49.         >数字键盘</InputItem>
  50.       </List.Body>
  51.     </List>);
  52.   },
  53. });
  55. FormatExample = createForm()(FormatExample);
  57. ReactDOM.render(<FormatExample />, mountNode);

InputItem文本输入 - 图1

API

成员说明类型可选值默认值
prefixListClsStringam-list
type文本框样式类型String线型hasLine,有边框hasBorder,本期只支持hasLinehasLine
format格式String银行卡输入bankCard,手机号输入phone（此时最大长度固定为11,maxLength设置无效）,密码输入password,文本输入text, 数字输入number（尽量唤起数字键盘）text
editable输入框是否可输入booltrue
nameinput的nameString无
valueinput的初始值String无
placeholderplaceholderString无
clear是否带清除功能boolfalse
maxLength最大长度number无
onChangeinput change事件触发的回调函数,参数是valueFunction无
onBlurinput blur事件触发的回调函数,参数是valueFunction无
onFocusinput focus事件触发的回调函数,参数是valueFunction无
extra右边注释string or node''
onExtraClickextra点击事件触发的回调函数,参数是event对象Function无
error报错样式boolfalse
onErrorClick点击报错icon触发的回调,Function无
size(本期不实现)尺寸stringlarge,smalllarge
labelNumber标签字数（一个表单页面中,通常有多个InputItem,需要统一标签字数以便统一宽度,保持页面整洁、美观）number2, 3, 4, 5, 6, 74
labelPosition(本期不实现)标题方向stringleft,topleft
textAlign(本期不实现)文本对齐stringleft,centerleft