javascript - HTML 输入类型数字格式大数字。引入空格或其他分隔符

Question

我在一台设备上向用户展示大量数字，如下所示:

123 879 233 223 211 782 782 

可以看出，数字以三个一组的形式呈现。

现在用户应该在另一台设备上输入这些数字。

我想以与他/她输入相同的方式呈现它们。

所以我目前有一个

  input type=number pattern='\d*'

我希望它基本上是(伪):

 type=text keyboard=numbers pattern='[0-9]{3}[0-9]{3} ...' 

类型编号在移动设备上很有用，因为它只会显示数字键盘，在这种情况下，它更相关且用户友好。

1) 有没有办法为标准输入类型=文本获取数字键盘？

2) 如果没有，有没有办法格式化输入到数字输入字段中的数字？

3) 如果不能，我们是否可以因为不称职而解雇所有参与 W3C 的人？他们可以引入允许输入的模式，而不是保留输入类型=文本，并允许一个表示键盘=数字的属性。

Answer 1

给你，

我有两个输入字段。一个带有类型编号，定位为:绝对且使用不透明度隐藏。

当您将输入聚焦到 type 时，隐藏的数字输入将被聚焦。

那里的输入被拾取并放置到视觉上可用的输入类型文本中。

<input type=text name=guid placeholder='18 digits' modulo='3' max='18' />


function numberInput(input) {
        var modulo   = parseInt(input.attr('modulo'));
        var max      = parseInt(input.attr('max')) || Infinity;

        var keyboard = $('<input type=number pattern="\d*" style="opacity:0; position:absolute;">');

        keyboard.insertBefore(input);

        input.on('focus', function() {
                keyboard.focus();
        });

        keyboard.on('input', function fn(){
                var tmp = keyboard.val(), val = '';

                if ( tmp.length > max ) {
                        keyboard.val( tmp = tmp.substring(0, max) )
                }

                var i = -1;
                while ( ++i < tmp.length ) {
                        if ( i > 0 && i % 3 === 0 ) {
                                val += ' ';
                        }
                        val += tmp.charAt(i);
                }

                input.val(val);

                // Trigger original event for external listeners 
                input.trigger.apply(input, arguments);
                // Note, the event target passed to trigger is now on the wrong object. To get the right object, simply change it to: 
                // input.trigger.call(input, 'input', arguments);
                // Note that for the latter, attempts to modify the value won't get picked up. 

        });
}