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-