在移动

Question

我需要显示具有以下功能的input：

1. 仅接受数字，以便输入的值将作为数字类型传播到controller变量
2. 以逗号显示数字（千位分隔符，即1000 =＆gt; 1,000）
3. 在移动设备上 - 专注时打开数字键盘

所以我尝试了<input type="text">和<input type="number">，但每个都有自己的优点和缺点：

• <input type="text">：
  • PROS：可以使用指令进行格式化和控制，因此它只接受数字，根据需要显示值并根据需要传播值。
  • 缺点：不会在移动设备上打开数字键盘，需要自定义指令和逻辑来处理用户输入
• <input type="number">：
  • PROS：由于我处理数字，这似乎是合乎逻辑的选择。它会根据需要打开数字键盘
  • 缺点：我无法找到让它显示格式化数字的方法

我目前正在使用<input type="text">并使用以下指令：

 app.directive('commaParse', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            //allow only numbers
            elem.bind('keypress', function (event) {
                if (event.keyCode < 48 || event.keyCode > 57) {
                    event.preventDefault();
                }
            });

            //prevent pasting text
            elem.bind('paste', function (event) {
                event.preventDefault();
            });

            //handle user input
            ctrl.$formatters.unshift(function (a) {
                var res = $filter("number")(ctrl.$modelValue);
                return res;
            });

            //handle value changes in code
            ctrl.$parsers.unshift(function (viewValue) {
                var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
                var res = $filter("number")(plainNumber);
                elem.val(res);
                return plainNumber;
            });
        }
    };
}]);

我尝试更改inputmode和lang属性，但没有成功。
所以问题是：如何让我的输入显示所需的格式化值和在手机上弹出数字键盘？