我在一台具有大量数字的设备上呈现用户,如下所示：

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的人吗？他们可以在其上引入模式,而不是保持输入类型=文本,并允许使用键盘=数字的属性.

最佳答案 干得好,

我有两个输入字段.一个具有类型编号,定位：绝对和隐藏使用不透明度.

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

拾取输入并将其放入可视输入类型文本中.

<input type=number name=keyboard pattern='\d{18}' style='opacity:0; position:absolute;' />

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

<script>
        var
                form     = div.find('> .form > form'),

                keyboard = form.find('input[name=keyboard]'),
                guid     = form.find('input[name=guid]')
        ;

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

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

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

                guid.val(val);
        });
</script>

注意可见性：隐藏;或显示：无;至少在Chrome中不起作用.

编辑：上面已简化为一个输入声明和一个方法调用：

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

        });
}