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

InputItem文本输入 - 图1

API

参数说明类型默认值
[type]可以是银行卡bankCard; 手机号phone(此时最大长度固定为11,maxLength设置无效); 密码password; 数字number(为了尽量唤起带小数点的数字键盘，此类型并不是原生 number，而是<input type=”text” pattern=”[0-9]*” />); digit(表示原生的 number 类型); money 以及其他标准 html input type 类型string‘text’
[value]valuestring-
[defaultValue]设置初始默认值string-
[placeholder]placeholderstring-
[editable]是否可编辑booleantrue
[disabled]是否禁用booleanfalse
[clear]是否带清除功能(仅editable为true,disabled为false才生效)booleanfalse
[maxLength]最大长度number-
[error]是否显示报错样式booleanfalse
[extra]右边注释string | TemplateRef-
[labelNumber]标签的文字个数，可用2-7之间的数字number5
[content]标签内容支持string和模版string | TemplateRef-
[updatePlaceholder]当清除内容时，是否将清除前的内容替换到 placeholder 中booleanfalse
[prefixListCls]列表 className 前缀string‘am-list’
[moneyKeyboardAlign]文字排版起始方向, 只有 type=’money’ 支持‘left’ | ‘right’‘right’
[locale]国际化，可覆盖全局的配置, 当type为money，可以自定义确认按钮的文案{ confirmLabel }-
(onErrorClick)点击报错 icon 触发的回调函数EventEmitter<object>-
(onExtraClick)extra 点击事件触发的回调函数EventEmitter<object>-
(onChange)change 事件触发的回调函数EventEmitter<string>-
(onBlur)blur 事件触发的回调函数EventEmitter<string>-
(onFocus)focus 事件触发的回调函数EventEmitter<string>-
(focus)使 input 聚焦EventEmitter<void>-

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