feat(input): support allowInputOverMax props (#3473)

Author: yangbai1991

src/input/README.en-US.md

@@ -10,6 +10,7 @@ style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 adjust-position | Boolean | true | \- | N
 align | String | left | text align type。options: left/center/right | N
+allow-input-over-max | Boolean | false | allow to continue input on value length is over `maxlength` or `maxcharacter` | N
 always-embed | Boolean | false | \- | N
 auto-focus | Boolean | false | \- | N
 borderless | Boolean | false | input without border | N
@@ -107,4 +108,4 @@ Name | Default Value | Description
 --td-input-suffix-text-color | @text-color-primary | - 
 --td-input-vertical-padding | 32rpx | - 
 --td-input-warning-text-color | @warning-color | - 
---td-input-warning-tips-color | @warning-color | - 
+--td-input-warning-tips-color | @warning-color | -

src/input/README.md

@@ -89,6 +89,7 @@ style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
 align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
+allow-input-over-max | Boolean | false | 超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入 | N
 always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N
 auto-focus | Boolean | false | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | N
 borderless | Boolean | false | 是否开启无边框模式 | N
@@ -186,4 +187,4 @@ t-class-tips | 提示样式类
 --td-input-suffix-text-color | @text-color-primary | - 
 --td-input-vertical-padding | 32rpx | - 
 --td-input-warning-text-color | @warning-color | - 
---td-input-warning-tips-color | @warning-color | - 
+--td-input-warning-tips-color | @warning-color | -

src/input/input.ts

@@ -67,14 +67,14 @@ export default class Input extends SuperComponent {
 
   methods = {
     updateValue(value) {
-      const { maxcharacter, maxlength } = this.properties;
-      if (maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
+      const { allowInputOverMax, maxcharacter, maxlength } = this.properties;
+      if (!allowInputOverMax && maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
         const { length, characters } = getCharacterLength('maxcharacter', value, maxcharacter);
         this.setData({
           value: characters,
           count: length,
         });
-      } else if (maxlength && maxlength > 0 && !Number.isNaN(maxlength)) {
+      } else if (!allowInputOverMax && maxlength && maxlength > 0 && !Number.isNaN(maxlength)) {
         const { length, characters } = getCharacterLength('maxlength', value, maxlength);
         this.setData({
           value: characters,

src/input/input.wxml

@@ -27,7 +27,7 @@
     <view class="{{classPrefix}}__content {{classPrefix}}--{{status}}">
       <input
         class="{{this.getInputClass(classPrefix, suffix, align, disabled)}} {{prefix}}-class-input"
-        maxlength="{{maxlength}}"
+        maxlength="{{allowInputOverMax ? -1 : maxlength}}"
         disabled="{{disabled || readonly}}"
         placeholder="{{placeholder}}"
         placeholder-style="{{placeholderStyle}}"

src/input/props.ts

@@ -16,6 +16,11 @@ const props: TdInputProps = {
     type: String,
     value: 'left',
   },
+  /** 超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入 */
+  allowInputOverMax: {
+    type: Boolean,
+    value: false,
+  },
   /** 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) */
   alwaysEmbed: {
     type: Boolean,
@@ -36,7 +41,7 @@ const props: TdInputProps = {
     type: String,
     value: 'always',
   },
-  /** 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` */
+  /** 是否可清空，默认不启动。值为 `true` 表示使用默认清空按钮，值为 `Object` 表示透传至 `icon` */
   clearable: {
     type: null,
     value: false,

src/input/type.ts

@@ -21,6 +21,14 @@ export interface TdInputProps {
     type: StringConstructor;
     value?: 'left' | 'center' | 'right';
   };
+  /**
+   * 超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入
+   * @default false
+   */
+  allowInputOverMax?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
    * @default false
@@ -54,7 +62,7 @@ export interface TdInputProps {
     value?: 'always' | 'focus';
   };
   /**
-   * 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon`
+   * 是否可清空，默认不启动。值为 `true` 表示使用默认清空按钮，值为 `Object` 表示透传至 `icon`
    * @default false
    */
   clearable?: {