Live data input filtration feature that exclusively accepts numerical values

Question

Live data input filtration feature that exclusively accepts numerical values

Hello, I am attempting to create a real-time input filter in JavaScript that only allows numbers and dots. Here is my code:

Javascript:

<script>
function thirdTaskFunction(evnt) {
    evnt = evnt || window.event;
    var charCode = evnt.which ? evnt.which : evnt.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

function thirdTaskFunction(evt) { 
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if(charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

function thirdTaskFunction() {
    var thirdInput = document.getElementById("thirdTaskInputText");
    thirdInput = thirdInput.onchange = thirdTaskFuncion;
    var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
    var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
    if(!valid.test(this.value)) {
        var compare = this.value.match(number);
        this.value = compare ? compare[0] : '';
    }

}
</script>

HTML:

<div id="thirdTaskDIV">
    <input id="thirdTaskInputText" type="text" placeholder="Type a number" autofocus onkeypressed="return thirdTaskFunction(event);">
</div>

I have tried various methods, but none of the thirdTaskFucntion() functions seem to work. I tested the solution on w3schools, so maybe that's the issue? It seems very similar to "HTML text input allow only numeric input," but it didn't work for me. I hope someone can point out what's happening here.

javascript html css

Answer 1

Answer №1

To restrict an input field to only accept numbers, you can implement a keypress event listener. Begin by identifying the input field and assigning it the event listener as shown below:

     const inputField = document.querySelector("/*input field id here*/");
     inputField.addEventListener("keypress", function(e){
       if(e.keyCode > 48 && e.keyCode < 57){
         e.preventDefault();
       }
     }

This functionality verifies if the pressed key corresponds to a number key. If not, it halts the default action of inserting the character into the input field.

If you have any queries, feel free to ask!

P.S. The keyCodes mentioned are approximations based on memory. For precise key code information, conduct a quick search for "ASCII key codes" on Google.

Answer 2

To restrict an input field to only accept numbers, you can implement a keypress event listener. Begin by identifying the input field and assigning it the event listener as shown below:

     const inputField = document.querySelector("/*input field id here*/");
     inputField.addEventListener("keypress", function(e){
       if(e.keyCode > 48 && e.keyCode < 57){
         e.preventDefault();
       }
     }

This functionality verifies if the pressed key corresponds to a number key. If not, it halts the default action of inserting the character into the input field.

If you have any queries, feel free to ask!

P.S. The keyCodes mentioned are approximations based on memory. For precise key code information, conduct a quick search for "ASCII key codes" on Google.

Answer 3

Answer №2

The dot on the keyboard has an event code called Period, while the numbers 0 to 9 have event codes like Digit0, Digit1, and so forth.

To limit input to only these characters, you can use the keydown event listener along with the includes() method to check if the key pressed matches "Digit" or "Period". If it doesn't match either, you can stop the input by using preventDefault() as shown below:

const input = document.getElementById('thirdTaskInputText');

function checkKey(e) {
  if(e.code.includes("Digit") || e.code.includes("Period")) {
    console.log("valid input");
  } else {
    e.preventDefault();
    console.log("not a number!");
  }
}

input.addEventListener('keydown', checkKey)

<input id="thirdTaskInputText" type="text" placeholder="Type a number">

You can simplify the above code further by combining the condition into a single statement using the bang operator ! like this:

const input = document.getElementById('thirdTaskInputText');

function checkKey(e) {
  if(!(e.code.includes("Digit") || e.code.includes("Period"))) e.preventDefault();
}

input.addEventListener('keydown', checkKey)

<input id="thirdTaskInputText" type="text" placeholder="Type a number">

Answer 4

The dot on the keyboard has an event code called Period, while the numbers 0 to 9 have event codes like Digit0, Digit1, and so forth.

To limit input to only these characters, you can use the keydown event listener along with the includes() method to check if the key pressed matches "Digit" or "Period". If it doesn't match either, you can stop the input by using preventDefault() as shown below:

const input = document.getElementById('thirdTaskInputText');

function checkKey(e) {
  if(e.code.includes("Digit") || e.code.includes("Period")) {
    console.log("valid input");
  } else {
    e.preventDefault();
    console.log("not a number!");
  }
}

input.addEventListener('keydown', checkKey)

<input id="thirdTaskInputText" type="text" placeholder="Type a number">

You can simplify the above code further by combining the condition into a single statement using the bang operator ! like this:

const input = document.getElementById('thirdTaskInputText');

function checkKey(e) {
  if(!(e.code.includes("Digit") || e.code.includes("Period"))) e.preventDefault();
}

input.addEventListener('keydown', checkKey)

<input id="thirdTaskInputText" type="text" placeholder="Type a number">

Live data input filtration feature that exclusively accepts numerical values

Answer №1

Answer №2

Similar questions

Issue encountered when utilizing ngResource in factory: unable to choose JSON index

Guide on connecting with a .asmx web service through a basic HTML page

The useState initial value does not seem to update properly when using a Virtual Keyboard

The Discord OAuth2 bot fails to assign roles to authenticated users

By utilizing the "order" property, I can arrange divs to start at the bottom and ascend as additional elements are added

What is the reason that other classes in JavaScript do not inherit the static methods of the Object class?

Using Router.back in Next.js triggers a complete page refresh

Is it a wise decision to provide the client with a new token just one minute before the expiration of the old one?

Ajax is malfunctioning and failing to fulfill my needs

Altering the text of dropdown items prior to the ASP.NET autopostback

Issue: Incorrectly calling a hook. Hooks can only be used within the body of a function component. Assistance needed to resolve this issue

Remove item from the array when the selection changes

Running an Express application within a nested folder or subpath: a guide

Utilizing Jquery to dynamically update div styling based on text content

Adjusting the transparency of each segment within a THREE.LineSegments object

Creating a layered effect: Adding an image onto another image using HTML and CSS

Retrieve the latest information and update the database with just one ajax request

Obtain the PHP hyperlink value from an AJAX response

``Changing the value of the radio button does not update the ng-model variable

Guide on showing a message on the server side when pressing a button in the web browser