Please enter only numerical values using jQuery

Question

Please enter only numerical values using jQuery

Currently, I am facing a slight issue. My goal is to only run the code when the input characters are numbers.

This is the snippet of code I have been working with:

$(".jq-sales, .jq-variablecosts, .jq-fixedcosts, .jq-additional-sales, .jq-sales-units, .jq-variablecosts-units, .jq-totalsold-units").keypress(function(event) {
      if (event.keyCode >= 48 && event.keyCode <= 57 && event.keyCode >= 96 && event.keyCode <= 105) {
        event.preventDefault();
      } 
      else {
        // Continue with my actions
      }       
    });

What could be the issue in my code?

I am aiming to accurately detect input from both the numpad and the number keys above the keyboard as well.

javascript jquery html css numbers

Answer 1

Answer №1

Your situation seems to present a contradiction

  if (event.keyCode >= 48 && event.keyCode <= 57 && event.keyCode >= 96 && event.keyCode <= 105) {

It is not possible for a number to fall within the ranges of both 48 to 57 and 96 to 105 simultaneously.

  if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

You should utilize the logical OR operator (||) here

Additionally, make sure that your action is performed when the condition is true, not false.

  if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
      // perform your desired action here
  } else {
      // do nothing
      event.preventDefault();
  }

Answer 2

Your situation seems to present a contradiction

  if (event.keyCode >= 48 && event.keyCode <= 57 && event.keyCode >= 96 && event.keyCode <= 105) {

It is not possible for a number to fall within the ranges of both 48 to 57 and 96 to 105 simultaneously.

  if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

You should utilize the logical OR operator (||) here

Additionally, make sure that your action is performed when the condition is true, not false.

  if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
      // perform your desired action here
  } else {
      // do nothing
      event.preventDefault();
  }

Answer 3

Answer №2

Your current conditional logic is flawed. You are trying to restrict the keyCode to be less than or equal to 57 AND greater than or equal to 96 simultaneously, which will never be true.

In addition, even if you were to fix that issue, you would still be blocking number keystrokes and running your code on non-number inputs.

To correct this, you should consider the following approach:

$(".jq-sales, .jq-variablecosts, .jq-fixedcosts, .jq-additional-sales, .jq-sales-units, .jq-variablecosts-units, .jq-totalsold-units").keypress(function(event) {
    if (
            ( event.keyCode >= 48 && event.keyCode <= 57 ) ||
            ( event.keyCode >= 96 && event.keyCode <= 105 )
        )
    {
        // Perform desired actions
    } 
    else {
        // Ignore non-numeric input
        event.preventDefault();
    }       
});

Answer 4

Your current conditional logic is flawed. You are trying to restrict the keyCode to be less than or equal to 57 AND greater than or equal to 96 simultaneously, which will never be true.

In addition, even if you were to fix that issue, you would still be blocking number keystrokes and running your code on non-number inputs.

To correct this, you should consider the following approach:

$(".jq-sales, .jq-variablecosts, .jq-fixedcosts, .jq-additional-sales, .jq-sales-units, .jq-variablecosts-units, .jq-totalsold-units").keypress(function(event) {
    if (
            ( event.keyCode >= 48 && event.keyCode <= 57 ) ||
            ( event.keyCode >= 96 && event.keyCode <= 105 )
        )
    {
        // Perform desired actions
    } 
    else {
        // Ignore non-numeric input
        event.preventDefault();
    }       
});

Please enter only numerical values using jQuery

Answer №1

Answer №2

Similar questions

Is there a way to designate whether the <ul> element is displayed horizontally or vertically?

Interact with the :before pseudo element when hovering over an element

After being deployed on Vercel, React is mistakenly redirecting to the incorrect file, although it functions properly when

Tips on implementing a function within a navigation bar from a specific context

Prevent a function from executing using ClearTimeout()

Changing Background Color on Div Click

Issue with aligning CSS in Internet Explorer 7

Deciphering JSON data in an Express.js application

How do I prevent a specific word from being removed in a contenteditable div using JavaScript?

Information submitted through an ajax request does not get saved in the $_POST array

Restart the calling process using NodeJS command

What is the best way to transfer values or fields between pages in ReactJS?

Storing radio button selection in a database using Ajax upon clicking

JavaScript - Attempting to insert a value into a text field by clicking a button

What are some recommended approaches for implementing AJAX without relying on Rails' pre-built helpers?

Tips for sending data from Ajax to another function

Ensuring various conditions with ngIf

Jose authentication is encountering issues with verifying JWT

Numerous Kendo windows are layered on top of each other, yet the text divisions within them remain distinct

JavaScript - Receiving alert - AC_RunActiveContent.js needed for this page to function