JavaScript Input Field Restricting to Numeric Values Only

Other Questions JavaScript
1

I have implemented this script successfully:

<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript'>
        function allowOnlyNumbers(event) {
            const charCode = (event.which) ? event.which : event.keyCode;
            return (charCode >= 48 && charCode <= 57) || charCode === 46 || charCode <= 31;
        }
    </script>
</head>
<body>
    <input id='inputField' type='text' name='inputField' onkeypress='return allowOnlyNumbers(event)'>
</body>
</html>

However, I don’t have HTML access and need help only using JavaScript.

document.getElementById('inputField').addEventListener('keypress', <<your function>>, false);

What should replace <<your function>>?

Additionally, I’ve encountered another issue with this component: when using copy-paste (ctrl+v or right-click), it fails to work. Is there a solution for that?

2

To restrict an input field to numeric values using JavaScript without HTML access, you can attach an event listener that handles both keypress and paste events. Below is a practical solution:

document.getElementById('inputField').addEventListener('keypress', function(event) {
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode < 48 || charCode > 57) {
        event.preventDefault();
    }
}, false);

// Handle paste event
document.getElementById('inputField').addEventListener('paste', function(event) {
    event.preventDefault();
    const pasteData = (event.clipboardData || window.clipboardData).getData('text');
    if (!isNaN(pasteData)) {
        this.value += pasteData;
    }
}, false);

This code will ensure that your input field accepts only numbers when typing and pasting. It checks if each part of the input is numeric, thereby preventing other characters from being inserted, providing a seamless experience.

3

A different technique to handle allowing only numeric input in JavaScript without HTML setup is to register keydown, input, and paste events. Here's an alternative solution:

const inputField = document.getElementById('inputField');

// Listen for keydown event
inputField.addEventListener('keydown', function(event) {
    if (
        (event.keyCode < 48 || event.keyCode > 57) && // Numbers
        event.keyCode !== 8 &&                       // Backspace
        (event.keyCode < 37 || event.keyCode > 40)   // Arrow keys
    ) {
        event.preventDefault();
    }
});

// Validation on input event to cover all inputs
inputField.addEventListener('input', function(event) {
    this.value = this.value.replace(/[^0-9]/g, ''); // Remove any non-numeric input
});

// Handle paste event
inputField.addEventListener('paste', function(event) {
    event.preventDefault();
    const pasteData = (event.clipboardData || window.clipboardData).getData('text');
    if (!isNaN(pasteData)) {
        document.execCommand('insertText', false, pasteData.replace(/[^0-9]/g, ''));
    }
});

This approach on keydown uses preventative measures against unwanted keys, while the input event cleanses any incorrect input entered by alternative means, ensuring the field remains strictly numerical even after a paste operation.