fix(Stepper): skip form number validation (#5792)

src/stepper/index.js

@@ -2,6 +2,7 @@ import { createNamespace, isDef, addUnit } from '../utils';
 import { resetScroll } from '../utils/dom/reset-scroll';
 import { preventDefault } from '../utils/dom/event';
 import { FieldMixin } from '../mixins/field';
+import { formatNumber } from '../field/utils';
 
 const [createComponent, bem] = createNamespace('stepper');
 
@@ -142,19 +143,13 @@ export default createComponent({
       }
     },
 
-    // filter illegal characters
-    filter(value) {
-      value = String(value).replace(/[^0-9.-]/g, '');
-
-      if (this.integer && value.indexOf('.') !== -1) {
-        value = value.split('.')[0];
-      }
-
-      return value;
+    // formatNumber illegal characters
+    formatNumber(value) {
+      return formatNumber(String(value), !this.integer);
     },
 
     format(value) {
-      value = this.filter(value);
+      value = this.formatNumber(value);
 
       // format range
       value = value === '' ? 0 : +value;
@@ -171,12 +166,7 @@ export default createComponent({
     onInput(event) {
       const { value } = event.target;
 
-      // allow input to be empty
-      if (value === '') {
-        return;
-      }
-
-      let formatted = this.filter(value);
+      let formatted = this.formatNumber(value);
 
       // limit max decimal length
       if (isDef(this.decimalLength) && formatted.indexOf('.') !== -1) {
@@ -290,15 +280,15 @@ export default createComponent({
           {...createListeners('minus')}
         />
         <input
-          type={this.integer ? 'tel' : 'number'}
+          type={this.integer ? 'tel' : 'text'}
           role="spinbutton"
           class={bem('input')}
-          // set keyboard in mordern browers
-          inputmode={this.integer ? 'numeric' : 'decimal'}
           value={this.currentValue}
           style={this.inputStyle}
           disabled={this.disabled}
           readonly={this.disableInput}
+          // set keyboard in mordern browers
+          inputmode={this.integer ? 'numeric' : 'decimal'}
           aria-valuemax={this.max}
           aria-valuemin={this.min}
           aria-valuenow={this.currentValue}