HTML input type number format a lot. A representation of space or another delimiter

Question

I represent the user on one device with a large number, for example:

123 879 233 223 211 782 782 

The numbers are presented in pieces of three , which is visible.

Now the user must enter these numbers on another device.

I would like to introduce them the way he / she prints them.

So, I CURRENT has

  input type=number pattern='\d*'

I would like this to be basically (pseudo):

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

A type number is useful on mobile devices because it displays a number keypad , which in this case is more relevant and user friendly.

1) Is there a way to get a keyboard of numbers for the standard input type = text ?

2) , , ?

3) , , W3C - ? , = , , , , , = .

Answer 1

,

. , : .

, .

.

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

, : hidden; : ; 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. 

        });
}