• InputItem文本输入
    • 规则
  • 代码演示
  • API
  • InputItem methods

    InputItem文本输入

    用于接受单行文本。

    规则

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

    代码演示

    基本用法

    最简单的用法。

    1. import { Component } from '@angular/core';
    2. import { ToastService } from 'ng-zorro-antd-mobile';
    4. @Component({
    5.   selector: 'demo-input-item-basic',
    6.   template: `
    7.     <div class="am-demo-page">
    8.       <div style="padding: 15px;font-size: 16px; color:#000">Basic</div>
    9.       <div class="am-list" style="margin:0;">
    10.         <div class="am-list-header">Money input</div>
    11.         <div class="am-list-body">
    12.           <InputItem [type]="'money'"
    13.                      [clear]="true"
    14.                      [placeholder]="'start from left'"
    15.                      [moneyKeyboardAlign]="'left'"
    16.           >光标在左</InputItem>
    17.           <InputItem [type]="'money'"
    18.                      [clear]="true"
    19.                      [placeholder]="'start from rigth'"
    20.           >光标在右</InputItem>
    21.           <InputItem [type]="'money'"
    22.                      [clear]="true"
    23.                      [placeholder]="'money format'"
    24.                      [focus]="numberFocus"
    25.           >数字键盘</InputItem>
    26.           <div class="am-list-item am-list-item-middle">
    27.             <div class="am-list-line">
    28.               <div class="am-list-content"
    29.                    style="width:100%;color:#108ee9;text-align:center"
    30.                    (click)="clickFocus()"
    31.               >click to focus</div>
    32.             </div>
    33.             <div class="am-list-ripple" style="display: none;"></div>
    34.           </div>
    35.         </div>
    36.       </div>
    37.       <div class="am-list" style="margin:0;">
    38.           <div class="am-list-header">Customize to focus</div>
    39.           <div class="am-list-body">
    40.             <InputItem [clear]="true"
    41.                        [placeholder]="'auto focus'"
    42.                        [focus]="autoFocus"
    43.             >标题</InputItem>
    44.             <InputItem [clear]="true"
    45.                        [placeholder]="'click the button below to focus'"
    46.                        [focus]="inputFocus"
    47.             >标题</InputItem>
    48.             <div class="am-list-item am-list-item-middle">
    49.               <div class="am-list-line">
    50.                 <div class="am-list-content"
    51.                      style="width:100%;color:#108ee9;text-align:center"
    52.                      (click)="clickFocusInput()"
    53.                 >click to focus</div>
    54.               </div>
    55.               <div class="am-list-ripple" style="display: none;"></div>
    56.             </div>
    57.           </div>
    58.       </div>
    59.       <div class="am-list" style="margin:0;">
    60.         <div class="am-list-header">Click label to focus input</div>
    61.         <div class="am-list-body">
    62.           <InputItem [placeholder]="'Click label to focus input'" [focus]="titleFocus">
    63.             <span (click)="clickTitle()">标题</span>
    64.           </InputItem>
    65.         </div>
    66.       </div>
    67.       <div class="am-list" style="margin:0;">
    68.         <div class="am-list-header">Show clear</div>
    69.         <div class="am-list-body">
    70.           <InputItem [clear]="true" [placeholder]="'displayed clear while typing'">标题</InputItem>
    71.         </div>
    72.       </div>
    73.       <div class="am-list" style="margin:0;">
    74.         <div class="am-list-header">Number of words for the title</div>
    75.         <div class="am-list-body">
    76.           <InputItem [clear]="true"
    77.                      [labelNumber]="5"
    78.                      [placeholder]="'limited title length'"
    79.           >标题过长超过5个字符</InputItem>
    80.         </div>
    81.       </div>
    82.       <div class="am-list" style="margin:0;">
    83.         <div class="am-list-header">Custom title（text / image / empty)</div>
    84.         <div class="am-list-body">
    85.           <InputItem [placeholder]="'no label'"></InputItem>
    86.           <InputItem [placeholder]="'title can be icon，image or text'">
    87.             <div style="background-image:url(https://zos.alipayobjects.com/rmsportal/DfkJHaJGgMghpXdqNaKF.png); background-size:cover;height:22px; width: 22px "></div>
    88.           </InputItem>
    89.         </div>
    90.       </div>
    91.       <div class="am-list" style="margin:0;">
    92.         <div class="am-list-header">Customize the extra content in the right</div>
    93.         <div class="am-list-body">
    94.           <InputItem [placeholder]="'0.00'" [extra]="'¥'">价格</InputItem>
    95.         </div>
    96.       </div>
    97.       <div class="am-list" style="margin:0;">
    98.         <div class="am-list-header">Format</div>
    99.         <div class="am-list-body">
    100.           <InputItem [type]="'bankCard'" [defaultValue]="'8888 8888 8888 8888'">银行卡</InputItem>
    101.           <InputItem [type]="'phone'" [placeholder]="'186 1234 1234'" (onChange)="inputChange($event)">手机号码</InputItem>
    102.           <InputItem [type]="'password'" [placeholder]="'****'">密码</InputItem>
    103.           <InputItem [type]="'number'" [placeholder]="'click to show number keyboard'">数字键盘</InputItem>
    104.         </div>
    105.       </div>
    106.       <div class="am-list" style="margin:0;">
    107.         <div class="am-list-header">Not editable / Disabled</div>
    108.         <div class="am-list-body">
    109.           <InputItem [editable]="false" [value]="'not editable'">姓名</InputItem>
    110.           <InputItem [disabled]="true" [value]="'style of disabled InputItem'">姓名</InputItem>
    111.         </div>
    112.       </div>
    113.       <div class="am-list" style="margin:0;">
    114.         <div class="am-list-header">Confirm when typing</div>
    115.         <div class="am-list-body">
    116.           <InputItem [type]="'phone'"
    117.                      [placeholder]="'input your phone'"
    118.                      [value]="value"
    119.                      [error]="error"
    120.                      (onErrorClick)="inputErrorClick($event)"
    121.                      (onChange)="inputChange($event)"
    122.           >手机号码</InputItem>
    123.         </div>
    124.       </div>
    125.     </div>
    126.   `,
    127.   styles: [
    128.     `
    129.       .am-list-body {
    130.         position: relative;
    131.         background-color: #fff;
    132.         border-top: 1px solid #ddd;
    133.         border-bottom: 1px solid #ddd;
    134.       }
    135.       .am-list-header {
    136.         padding: 15px 15px 9px 15px;
    137.         font-size: 14px;
    138.         color: #888;
    139.         width: 100%;
    140.         -webkit-box-sizing: border-box;
    141.         box-sizing: border-box;
    142.       }
    143.       /deep/ .am-list-body InputItem:not(:last-child) .am-list-line {
    144.         border-bottom: 1px solid #ddd;
    145.       }
    147.       .am-list-item .am-list-line .am-list-content {
    148.         -webkit-box-flex: 1;
    149.         -webkit-flex: 1;
    150.         -ms-flex: 1;
    151.         flex: 1;
    152.         color: #000;
    153.         font-size: 17px;
    154.         line-height: 1.5;
    155.         text-align: left;
    156.         width: auto;
    157.         overflow: hidden;
    158.         text-overflow: ellipsis;
    159.         white-space: nowrap;
    160.         padding-top: 7px;
    161.         padding-bottom: 7px;
    162.       }
    163.     `
    164.   ]
    165. })
    166. export class DemoInputItemBasicComponent {
    167.   value = '';
    168.   error = false;
    169.   numberFocus = {
    170.     focus: false,
    171.     date: new Date()
    172.   };
    173.   inputFocus = {
    174.     focus: false,
    175.     date: new Date()
    176.   };
    178.   titleFocus = {
    179.     focus: false,
    180.     date: new Date()
    181.   };
    182.   autoFocus = { focus: true, date: new Date() };
    184.   constructor(private _toast: ToastService) {}
    186.   inputErrorClick(e) {
    187.     ToastService.info('Please enter 11 digits');
    188.   }
    190.   inputChange(e) {
    191.     const value = e.replace(/\s/g, '');
    192.     if (value.length < 11 && value.length > 0) {
    193.       this.error = true;
    194.     } else {
    195.       this.error = false;
    196.     }
    197.     this.value = e;
    198.   }
    200.   clickFocus() {
    201.     this.numberFocus = {
    202.       focus: true,
    203.       date: new Date()
    204.     };
    205.   }
    207.   clickFocusInput() {
    208.     this.inputFocus = {
    209.       focus: true,
    210.       date: new Date()
    211.     };
    212.   }
    214.   clickTitle() {
    215.     this.titleFocus = {
    216.       focus: true,
    217.       date: new Date()
    218.     };
    219.   }
    220. }

    InputItem 文本输入 - 图1

    API

    属性说明类型默认值
    type可以是银行卡bankCard; 手机号phone(此时最大长度固定为11,maxLength设置无效); 密码password; 数字number(为了尽量唤起带小数点的数字键盘，此类型并不是原生 number，而是<input type="text" pattern="[0-9]*" />); digit(表示原生的 number 类型); money 以及其他标准 html input type 类型Stringtext
    valuevalueString无
    defaultValue设置初始默认值String-
    placeholderplaceholderString''
    editable是否可编辑booltrue
    disabled是否禁用boolfalse
    clear是否带清除功能(仅editable为true,disabled为false才生效)boolfalse
    maxLength最大长度number无
    onChangechange 事件触发的回调函数(val: string): void-
    onBlurblur 事件触发的回调函数(val: string): void-
    onFocusfocus 事件触发的回调函数(val: string): void-
    error报错样式boolfalse
    onErrorClick点击报错 icon 触发的回调函数(e: Object): void无
    extra右边注释string or TemplateRef''
    onExtraClickextra 点击事件触发的回调函数(e: Object): void无
    labelNumber标签的文字个数，可用2-7之间的数字number5
    updatePlaceholder当清除内容时，是否将清除前的内容替换到 placeholder 中boolfalse
    prefixListCls列表 className 前缀Stringam-list
    moneyKeyboardAlign文字排版起始方向, 只有 type='money' 支持， 可选为 'left', 'right'String'right'
    locale国际化，可覆盖全局的配置, 当type为money，可以自定义确认按钮的文案。Object: { confirmLabel }无

    注意: InputItem 当 type=number 时不支持输入负号, 你可以利用 type=text 来自己实现。

    InputItem methods

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