feat(input): support enterkeyhint and spellCheck API

Tencent · Nov 22, 2024 · 8435512 · 8435512
1 parent b7535d4
commit 8435512
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 0 deletions.
diff --git a/src/input/Input.tsx b/src/input/Input.tsx
@@ -31,6 +31,7 @@ const Input = forwardRef<InputRefProps, InputProps>((props, ref) => {
     borderless,
     clearable,
     clearTrigger,
+    enterkeyhint,
     disabled,
     format,
     label,
@@ -39,6 +40,7 @@ const Input = forwardRef<InputRefProps, InputProps>((props, ref) => {
     name,
     placeholder,
     prefixIcon,
+    spellCheck,
     suffix,
     suffixIcon,
     tips,
@@ -216,6 +218,8 @@ const Input = forwardRef<InputRefProps, InputProps>((props, ref) => {
             placeholder={placeholder}
             readOnly={readonly}
             maxLength={resultMaxLength || -1}
+            enterKeyHint={enterkeyhint}
+            spellCheck={spellCheck}
             onFocus={handleFocus}
             onBlur={handleBlur}
             onInput={handleInput}

diff --git a/src/input/defaultProps.ts b/src/input/defaultProps.ts
@@ -16,6 +16,7 @@ export const inputDefaultProps: TdInputProps = {
   layout: 'horizontal',
   placeholder: undefined,
   readonly: undefined,
+  spellCheck: false,
   status: 'default',
   type: 'text',
 };
diff --git a/src/input/input.en-US.md b/src/input/input.en-US.md
@@ -16,6 +16,7 @@ borderless | Boolean | false | input without border | N
 clearTrigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N
 clearable | Boolean | false | show clear icon, clicked to clear input value | N
 disabled | Boolean | undefined | make input to be disabled | N
+enterkeyhint | String | - | attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)。options: enter/done/go/next/previous/search/send | N
 errorMessage | String | - | `deprecated` | N
 format | Function | - | input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better。Typescript：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/input/type.ts) | N
 label | TNode | - | text on the left of input。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
@@ -27,6 +28,7 @@ placeholder | String | undefined | \- | N
 prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 readonly | Boolean | undefined | \- | N
 size | String | medium | `deprecated`。options: small/medium。Typescript：`'medium' \| 'small'` | N
+spellCheck | Boolean | false | attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck) | N
 status | String | default | options: default/success/warning/error | N
 suffix | TNode | - | suffix content before suffixIcon。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | suffix icon of input。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N

diff --git a/src/input/input.md b/src/input/input.md
@@ -16,6 +16,7 @@ borderless | Boolean | false | 是否开启无边框模式 | N
 clearTrigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
 clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | undefined | 是否禁用输入框 | N
+enterkeyhint | String | - | 用于控制回车键样式，此 API 仅在部分浏览器支持，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)。可选项：enter/done/go/next/previous/search/send | N
 errorMessage | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N
 format | Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/input/type.ts) | N
 label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
@@ -27,6 +28,7 @@ placeholder | String | undefined | 占位符 | N
 prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 readonly | Boolean | undefined | 只读状态 | N
 size | String | medium | 已废弃。输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N
+spellCheck | Boolean | false | 是否开启拼写检查，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck) | N
 status | String | default | 输入框状态。可选项：default/success/warning/error | N
 suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N

diff --git a/src/input/type.ts b/src/input/type.ts
@@ -46,6 +46,10 @@ export interface TdInputProps {
    * 是否禁用输入框
    */
   disabled?: boolean;
+  /**
+   * 用于控制回车键样式，此 API 仅在部分浏览器支持，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
+   */
+  enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
   /**
    * 指定输入框展示值的格式
    */
@@ -84,6 +88,11 @@ export interface TdInputProps {
    * 只读状态
    */
   readonly?: boolean;
+  /**
+   * 是否开启拼写检查，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck)
+   * @default false
+   */
+  spellCheck?: boolean;
   /**
    * 输入框状态
    * @default default