Displaying large numbers in HTML input fields in a formatted manner, such as adding a space or separator for

Question

Displaying large numbers in HTML input fields in a formatted manner, such as adding a space or separator for

Presenting the user on one device with a string of numbers, like so:

123 879 233 223 211 782 782

The numbers are displayed in groups of three, as shown above.

Now, the user needs to input these numbers on another device.

I want them to enter the numbers exactly as they see them.

Currently, I am using an

  input type=number pattern='\d*'

I would prefer it to be (pseudo) :

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

The number type is beneficial for mobile devices because it brings up the numeric keypad, which is more relevant and user-friendly in this scenario.

1) Is there a way to get a numbers keyboard for a standard text input field?

2) If not, can we format the numbers entered into the numeric input field?

3) If not, should we question the competence of those at W3C responsible for these standards? Instead of just allowing patterns in text inputs, they could have introduced a 'keyboard=numbers' attribute for better usability.

javascript html css web w3c

Answer 1

Answer №1

Here is the solution:

I designed a system with two input fields. One of them has the type number and is positioned absolutely, cleverly hidden using opacity.

When you focus on typing in one input field, the hidden number input automatically becomes focused instead.

The numbers entered into the hidden input are then transferred and displayed in the visible text input field.

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


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

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

        virtualKeyboard.insertBefore(input);

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

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

                if ( tmp.length > max ) {
                        virtualKeyboard.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. 

        });
}

Answer 2

Here is the solution:

I designed a system with two input fields. One of them has the type number and is positioned absolutely, cleverly hidden using opacity.

When you focus on typing in one input field, the hidden number input automatically becomes focused instead.

The numbers entered into the hidden input are then transferred and displayed in the visible text input field.

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


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

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

        virtualKeyboard.insertBefore(input);

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

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

                if ( tmp.length > max ) {
                        virtualKeyboard.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. 

        });
}

Displaying large numbers in HTML input fields in a formatted manner, such as adding a space or separator for

Answer №1

Similar questions

Real-time audio feed permanently stuck in Chromium-powered web browsers

Creating a user-friendly error message on the interface using JavaScript

Struggling to grasp the concept of closures?

How can one easily implement a countdown timer in an Ionic 3 app?

What makes this JQuery function only compatible with post requests?

javascript issue with accessing global variable outside of function despite multiple attempts

Guide on dynamically displaying a page based on the response from express/mssql middleware

Ways to stop the browser from ending the connection?

Text buttons on the menu are running into each other when displayed on an Android device

Is there a way to alter the footer across all my pages using just one document?

Optimizing Angular.js templates for faster loading using Node.js pre-compilation

After the JavaScript calculation is completed, the following display may show a value of NaN

The webpage is inaccessible only on mobile Safari, with an error message indicating a lack of internet

Activate the ion-navbar button when submitting from the modal page

Ways to prevent decreasing the value below zero in ReactJS?

What is causing the click event handler to only function on the initial page?

Display Numerous Values Using Ajax

Tips for setting up npm dependencies in a subfolder

I am looking to execute a MySQL query using a value entered into a text box

Discovering the smallest and largest values in an object literal using JavaScript