feat(Field): improve number keyboard

src/field/README.zh-CN.md

@@ -45,9 +45,9 @@ export default {
 <van-field v-model="text" label="文本" />
 <!-- 输入手机号，调起手机号键盘 -->
 <van-field v-model="tel" type="tel" label="手机号" />
-<!-- 允许输入整数，调起数字键盘 -->
+<!-- 允许输入整数，调起纯数字键盘 -->
 <van-field v-model="digit" type="digit" label="整数" />
-<!-- 允许输入数字，调起全键盘 -->
+<!-- 允许输入数字，调起带符号的纯数字键盘 -->
 <van-field v-model="number" type="number" label="数字" />
 <!-- 输入密码 -->
 <van-field v-model="password" type="password" label="密码" />

src/field/index.js

@@ -1,6 +1,5 @@
 // Utils
 import { formatNumber } from './utils';
-import { isIOS } from '../utils/validate/system';
 import { preventDefault } from '../utils/dom/event';
 import { resetScroll } from '../utils/dom/reset-scroll';
 import {
@@ -419,24 +418,21 @@ export default createComponent({
       }
 
       let inputType = type;
+      let inputMode;
 
-      // type="number" is weired in iOS
+      // type="number" is weired in iOS, and can't prevent dot in Android
+      // so use inputmode to set keyboard in mordern browers
       if (type === 'number') {
         inputType = 'text';
+        inputMode = 'decimal';
       }
 
       if (type === 'digit') {
-        // set pattern to show number keyboard in iOS
+        inputType = 'tel';
-        if (isIOS()) {
+        inputMode = 'numeric';
-          inputType = 'number';
-          inputProps.attrs.pattern = '\\d*';
-          // cannot prevent dot when type is number in Android, so use tel
-        } else {
-          inputType = 'tel';
-        }
       }
 
-      return <input type={inputType} {...inputProps} />;
+      return <input type={inputType} inputmode={inputMode} {...inputProps} />;
     },
 
     genLeftIcon() {

src/field/test/__snapshots__/demo.spec.js.snap

@@ -27,13 +27,13 @@ exports[`renders demo correctly 1`] = `
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>整数</span></div>
       <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="tel" placeholder="请输入整数" class="van-field__control"></div>
+        <div class="van-field__body"><input type="tel" inputmode="numeric" placeholder="请输入整数" class="van-field__control"></div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>数字</span></div>
       <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" placeholder="请输入数字（支持小数）" class="van-field__control"></div>
+        <div class="van-field__body"><input type="text" inputmode="decimal" placeholder="请输入数字（支持小数）" class="van-field__control"></div>
       </div>
     </div>
     <div class="van-cell van-field">

src/stepper/index.js

@@ -290,13 +290,11 @@ export default createComponent({
           {...createListeners('minus')}
         />
         <input
-          type="number"
+          type={this.integer ? 'tel' : 'number'}
           role="spinbutton"
           class={bem('input')}
           // set keyboard in mordern browers
           inputmode={this.integer ? 'numeric' : 'decimal'}
-          // set keyboard in iOS 8 ~ 12
-          pattern={this.integer ? '\\d*' : null}
           value={this.currentValue}
           style={this.inputStyle}
           disabled={this.disabled}

src/stepper/test/__snapshots__/demo.spec.js.snap

@@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
   <div class="van-cell van-cell--center">
     <div class="van-cell__title"><span>限制输入整数</span></div>
     <div class="van-cell__value">
-      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="numeric" pattern="\\d*" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
+      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="tel" role="spinbutton" inputmode="numeric" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
     </div>
   </div>
   <div class="van-cell van-cell--center">