因为是独立的数字键盘，所以
1 对应的输入框 type="number" 比 type="text" 更好；
2 加上 readonly="readonly" 在focus的时候不会太弹出手机自带的键盘。

    <input id="test1" type="number" readonly="readonly"/> 
    
    

使用模板

requirejs.config({
  baseUrl: "/",
  paths: {
    'jquery': 'js/jquery/jquery-2.2.3.min',
    'Vue': 'js/vue/vue.min',
    'VueRouter': 'js/vue/vue-router.min',
    'Util': 'js/common/util',
    'text': 'js/common/text',
    'FastClick': 'js/common/fastclick',
    'jquery-ajax-plugin': 'js/jquery/jquery-ajax-plugin'
  },
  shim: {
    'query-ajax-plugin': ['jquery']   //如果引用的jquery插件的时候，需要shim jquery
  },
  waitSeconds: 0    //设置require加载超时时间为0，表示永不超时
});
 
requirejs(['jquery', 'Vue', 'VueRouter', 'FastClick', 'Util',
  'text!html/common/popup.html',
  'text!html/login/first.html',
  'text!html/login/second.html',
  'text!html/login/third.html',
  'jquery-ajax-plugin'], function ($, Vue, VueRouter, FastClick, Util, 
  popup, firstH, secondH, thirdH) {
 
  //先注册组件
  var popupCompHmtl = Vue.extend({
    template: popup
  });
  Vue.component('popup-component', popupCompHmtl);
 
  //获取必要变量
  var websiteURL = Util.getURL();
 
  //注册各个模块
  var _v = null;
  var firstHtml = Vue.extend({
    template: firstH,
    data: function () {
      return {}
    },
    created: function () {
      _v = this;
    },
    ready: function () {
      FastClick.attach(document.body);
      $("head title").html($("header p").html());
      Util.showHeader();
 
      //需要初始化的数据的ajax，请写在这里，而不是create方法里，
      //原因：create的时候，页面还没被完全加载到，所有popup component这个组件都没被加载到，会影响显示效果的。
    },
    methods: {
      method1: function() {
      },
      method2: function () {
      }
    }
    ...
    ...
 
  var App = Vue.extend({});
  Vue.use(VueRouter);
  var router = new VueRouter();
  router.map({
    '/first': {
      component: firstHtml
    },
    '/second': {
      component: secondHtml
    },
    '/third': {
      component: thirdHtml
    }
  })
 
  router.start(App, '#main');
  });

加了一套loadingToast框架，在所有的ajax请求发起前 都会先有 loadingToast，结束后会自动关掉loadingToast

同时在如果收到结果有特殊字段的时候 做同一处理。

jquery-ajax-plugin.js

;(function ($) {
  //备份jquery的ajax方法
  var _ajax = $.ajax;
 
  //重写jquery的ajax方法
  $.ajax = function (opt) {
    //备份opt中error和success方法
    var fn = {
      error: function (XMLHttpRequest, textStatus, errorThrown) {
      },
      success: function (data, textStatus) {
      }
    }
    if (opt.error) {
      fn.error = opt.error;
    }
    if (opt.success) {
      fn.success = opt.success;
    }
 
    //扩展增强处理
    var _opt = $.extend(opt, {
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        //超时
        if (textStatus == 'timeout') {
          $("#toastContent").html("请求超时，请稍后重新尝试");
          $("#toast").show();
          setTimeout(function () {
            $("#toast").hide();
          }, 2000);
        } else {
          //错误方法增强处理
          fn.error(XMLHttpRequest, textStatus, errorThrown);
        }
      },
      success: function (data, textStatus) {
        //成功回调方法增强处理
        if (!data) {
          $("#toastContent").html("哎呀，调用后端系统出错了");
          $("#toast").show();
          setTimeout(function () {
            $("#toast").hide();
          }, 2000);
 
        } else if (!data.success && !!data.needLoginURL) {
          $("#toastContent").html(data.resultMsg);
          $("#toast").show();
          setTimeout(function () {
            $("#toast").hide();
            window.location = data.needLoginURL + "?returnURL=" + encodeURIComponent(document.location.href);
          }, 2000);
 
        } else if (!data.success && !data.needLoginURL) {
          if (!!data.resultMsg) {
            //由于历史问题dialog2 是指的的 一个按钮的 dialog对应的是showDialog1
            if (data.displayType == "showDialog1") {
              $("#dialog2Content").html(data.resultMsg);
              $('#dialog2').show().on('click', '.weui_btn_dialog', function () {
                $('#dialog2').off('click').hide();
              });
 
              //由于历史问题dialog1 是指的的 一个按钮的 dialog对应的是showDialog2
            } else if (data.displayType == "showDialog2") {
              $("#dialog1Content").html(data.resultMsg);
              $("#dialog1").show().on('click', '.weui_btn_dialog', function () {
                $("#dialog1").off('click').hide();
              });
 
            } else {
              $("#toastContent").html(data.resultMsg);
              $("#toast").show();
              setTimeout(function () {
                $("#toast").hide();
              }, 2000);
            }
 
          } else {
            $("#toastContent").html("哎呀，调用后端系统出错了");
            $("#toast").show();
            setTimeout(function () {
              $("#toast").hide();
            }, 2000);
          }
 
        } else {
          fn.success(data, textStatus);
        }
 
      },
      beforeSend: function (XHR) {
        //提交前回调方法
        $('#loadingToast').show();
        setTimeout(function () {
          $('#loadingToast').hide();
        }, 9000);
      },
      complete: function (XHR, TS) {
        //请求完成后回调函数 (请求成功或失败之后均调用)。
        $('#loadingToast').hide();
      }
    });
    _ajax(_opt);
  };
})(jQuery);