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

Question

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

123 879 233 223 211 782 782

数字以 三个一组 的形式显示，如您所见。

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

我想以与 he/she 键入它们相同的方式呈现它们。

所以我目前有

  input type=number pattern='\d*'

我希望它基本上是（伪）：

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

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

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

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

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

Answer 1

给你，

我有两个输入字段。一个带有类型编号，即 positioned:absolute 和 使用不透明度隐藏。

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

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

<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. 

        });
}

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

HTML input type number format large number. Introducing space or other separator

html

javascript

css

w3c

web