Replace numeric input element with select element on mobile devices

README.markdown

Something I wrote years ago but might still be useful. A simple script to replace numeric input elements with their equivalent select element to ease input on touch based devices.

example.html

<input name="my_numeric_input" type="number" min="2" max="3" data-custom-property="custom-value" />
<script>
    document.addEventListener('DOMContentLoaded', function (domLoaded) {
        var document = domLoaded.target;

        function replaceNumericInputWithSelectList (inputElement) {
            var name = inputElement.name;
            var min = inputElement.min;
            var max = inputElement.max;
            var value = undefined === inputElement ? undefined : parseInt(inputElement.value);

            if (!name) {
                throw new Error('Name attribute is missing.');
            } else if (!min) {
                throw new Error('Minimum value missing.');
            } else if (!max) {
                throw new Error('Maximum missing.');
            }

            var selectElement = document.createElement('select');

            selectElement.setAttribute('name', name);
            anEmptyOptionElement = document.createElement('option');
            selectElement.appendChild(anEmptyOptionElement);

            for (var i = min, anOptionElement; i <= max; i++) {
                anOptionElement = document.createElement('option');

                anOptionElement.setAttribute('value', i);
                anOptionElement.selected = (value === i);
                anOptionElement.textContent = i;

                selectElement.appendChild(anOptionElement);
            }

            selectElement.dataset = inputElement.dataset.entries();
            inputElement.parentNode.replaceChild(selectElement, inputElement);
        }

        if ('ontouchstart' in document.documentElement) {
            var numericInputs = document.querySelectorAll('input[type="number"]');

            for (var i = 0, nrOfNumericInputs = numericInputs.length, anInput; i < nrOfNumericInputs; i++) {
                anInput = numericInputs.item(i);

                try {
                    replaceNumericInputWithSelectList(anInput);
                } catch (anError) {
                    if (window.console && window.console.error) {
                        window.console.error(anError.message);
                    }
                }
            }
        }
    }, false);

</script>

Alternative approach from the same era: Replace the number for tel.

document.addEventListener('DOMContentLoaded', function () {
    if ('ontouchstart' in document.documentElement) {
        var numericInputs = document.querySelectorAll('input[type="number"]');

        for (var i = 0, nrOfNumericInputs = numericInputs.length, input; i < nrOfNumericInputs; i++) {
            input = numericInputs.item(i);
            input.type = 'tel';
        }
    }
}, false);