diff --git a/src/input/Input.tsx b/src/input/Input.tsx index 338515d3..6470b01e 100644 --- a/src/input/Input.tsx +++ b/src/input/Input.tsx @@ -31,6 +31,7 @@ const Input = forwardRef((props, ref) => { borderless, clearable, clearTrigger, + enterkeyhint, disabled, format, label, @@ -39,6 +40,7 @@ const Input = forwardRef((props, ref) => { name, placeholder, prefixIcon, + spellCheck, suffix, suffixIcon, tips, @@ -216,6 +218,8 @@ const Input = forwardRef((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 index f4fd1473..5dab262c 100644 --- 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 index 3bd45e74..74b7cc21 100644 --- 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 index d8ed3652..2d7f21f1 100644 --- 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 index db6bd5b3..4de99df3 100644 --- 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