feat(Field): add inputmode props (#13208)

packages/vant/src/field/Field.tsx

@@ -9,6 +9,7 @@ import {
   defineComponent,
   type PropType,
   type ExtractPropTypes,
+  type HTMLAttributes,
 } from 'vue';
 
 // Utils
@@ -112,6 +113,7 @@ export const fieldSharedProps = {
     type: Boolean,
     default: null,
   },
+  inputmode: String as PropType<HTMLAttributes['inputmode']>,
 };
 
 export const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
@@ -539,10 +541,12 @@ export default defineComponent({
       };
 
       if (props.type === 'textarea') {
-        return <textarea {...inputAttrs} />;
+        return <textarea {...inputAttrs} inputmode={props.inputmode} />;
       }
 
-      return <input {...mapInputType(props.type)} {...inputAttrs} />;
+      return (
+        <input {...mapInputType(props.type, props.inputmode)} {...inputAttrs} />
+      );
     };
 
     const renderLeftIcon = () => {

packages/vant/src/field/utils.ts

@@ -91,27 +91,26 @@ export function resizeTextarea(
   }
 }
 
-export function mapInputType(type: FieldType): {
+export function mapInputType(
+  type: FieldType,
+  inputmode?: HTMLAttributes['inputmode'],
+): {
   type: InputHTMLAttributes['type'];
   inputmode?: HTMLAttributes['inputmode'];
 } {
   // type="number" is weird in iOS, and can't prevent dot in Android
   // so use inputmode to set keyboard in modern browsers
   if (type === 'number') {
-    return {
+    type = 'text';
-      type: 'text',
+    inputmode ??= 'decimal';
-      inputmode: 'decimal',
-    };
   }
 
   if (type === 'digit') {
-    return {
+    type = 'tel';
-      type: 'tel',
+    inputmode ??= 'numeric';
-      inputmode: 'numeric',
-    };
   }
 
-  return { type };
+  return { type, inputmode };
 }
 
 // get correct length of emoji