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

Odd behavior observed in the Android browser while choosing input fields

Incorporating an additional row into a material table

Determine if the object's value is present

Could a css style be applied to a parent element based on the status of its child element?

Adjust the header width and column alignment when freezing the header in a gridview interface

Having trouble getting the `nth-of-type` and `nth-child` selectors in CSS to function

How can a color gradient blend be applied to geometry on multiple axes using THREE.JS shader?

What is the best way to structure a data object in Javascript or VueJs?

Extract values from JSON object and store them in an array, then apply them in an external

Onload, capture page elements, delete them, and then access the original content

Is it possible to alter the background behind each word in a text using only CSS?

Fixed position halting in a specific area

Modifying the disabled attribute of an input tag upon button click in Angular 2

Utilize Bootstrap4 to position content above the navigation icon

When employing UI-Router, custom directives may not function properly within nested views

How can I create a circular Datepicker in JavaFX?

Encountered an issue with reading the property 'drop' from an undefined source during a straightforward migration

Having Trouble with Gulp and AutoPrefixer Integration

Browsing through different pages on a Rails app will trigger numerous requests to various destinations

Utilize ajax to round the floating point number