diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index 69635daf1..83b22babf 100644 --- a/packages/vant/src/field/Field.tsx +++ b/packages/vant/src/field/Field.tsx @@ -80,6 +80,7 @@ export const fieldSharedProps = { placeholder: String, autocomplete: String, errorMessage: String, + enterkeyhint: String, clearTrigger: makeStringProp('focus'), formatTrigger: makeStringProp('onChange'), error: { @@ -412,6 +413,7 @@ export default defineComponent({ autofocus: props.autofocus, placeholder: props.placeholder, autocomplete: props.autocomplete, + enterkeyhint: props.enterkeyhint, 'aria-labelledby': props.label ? `${id}-label` : undefined, onBlur, onFocus, diff --git a/packages/vant/src/field/README.md b/packages/vant/src/field/README.md index 3aa306c53..e8f4e5244 100644 --- a/packages/vant/src/field/README.md +++ b/packages/vant/src/field/README.md @@ -283,7 +283,8 @@ Use `input-align` prop to align the input value. | right-icon | Right side icon name | _string_ | - | | icon-prefix | Icon className prefix | _string_ | `van-icon` | | rules | Form validation rules | _FieldRule[]_ | - | -| autocomplete `v3.0.3` | [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute of native input element | _string_ | - | +| autocomplete `v3.0.3` | HTML native attribute, see [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - | +| enterkeyhint `v3.4.8` | HTML native attribute, see [MDN - enterkeyhint](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
| _string_ | - | ### Events diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md index 75aafe688..1bf22428a 100644 --- a/packages/vant/src/field/README.zh-CN.md +++ b/packages/vant/src/field/README.zh-CN.md @@ -302,7 +302,8 @@ export default { | right-icon | 右侧图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - | | icon-prefix | 图标类名前缀,等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | | rules | 表单校验规则,详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | _FieldRule[]_ | - | -| autocomplete `v3.0.3` | input 标签原生的[自动完成属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - | +| autocomplete `v3.0.3` | HTML 原生属性,用于控制自动完成功能,详见 [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - | +| enterkeyhint `v3.4.8` | HTML 原生属性,用于控制回车键样式,此 API 仅在部分浏览器支持,详见 [MDN - enterkeyhint](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
| _string_ | - | ### Events diff --git a/packages/vant/src/field/test/index.spec.js b/packages/vant/src/field/test/index.spec.js index 8a9258124..4cd8e8e20 100644 --- a/packages/vant/src/field/test/index.spec.js +++ b/packages/vant/src/field/test/index.spec.js @@ -426,6 +426,17 @@ test('should allow to set autocomplete attribute', () => { ); }); +test('should allow to set enterkeyhint attribute', () => { + const wrapper = mount(Field, { + props: { + enterkeyhint: 'done', + }, + }); + expect(wrapper.find('input').element.getAttribute('enterkeyhint')).toEqual( + 'done' + ); +}); + test('should change clear icon when using clear-icon prop', async () => { const wrapper = mount(Field, { props: {