The onkeyup event appears to be malfunctioning

Question

The onkeyup event appears to be malfunctioning

onkeypress seems to be working fine, but I'm having trouble getting onkeyup to work. Any suggestions on how to make onkeyup work properly?

https://jsfiddle.net/btykt0nk/

function isNumber(number_check) {
    number_check = (number_check) ? number_check : window.event;
    var charCode = (number_check.which) ? number_check.which : number_check.keyCode;
    console.log(charCode);
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

<input type="text" onkeyup="return isNumber(event);">

javascript

Answer 1

Answer №1

It's important to address this issue using the onkeypress event.

Take a look at this solution

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
</input>

Answer 2

It's important to address this issue using the onkeypress event.

Take a look at this solution

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
</input>

Answer 3

Answer №2

Instead of using return in this scenario, simply attach your function to the onkeyup event:

onkeyup="isNumber(event)"

function isNumber(event) {
  event = (event) ? event : window.event;
  var charCode = (event.which) ? event.which : event.keyCode;
  
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
     console.log(false);
  }else{
     console.log(true);
  }
}

<input type="text" onkeyup="isNumber(event);">

For better result tracking, use console.log(true) and console.log(false) within your function instead of using return false or return true.

EDIT:

To restrict your input to numbers only, utilize event.preventDefault() along with the onkeypress event. This will ensure that only numeric characters are accepted:

function isNumber(event) {
  event = (event) ? event : window.event;
  var charCode = (event.which) ? event.which : event.keyCode;
  
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
     console.log(false);
     event.preventDefault();
  }else{
     console.log(true);
  }
}

<input type="text" onkeypress="isNumber(event);">

Answer 4

Instead of using return in this scenario, simply attach your function to the onkeyup event:

onkeyup="isNumber(event)"

function isNumber(event) {
  event = (event) ? event : window.event;
  var charCode = (event.which) ? event.which : event.keyCode;
  
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
     console.log(false);
  }else{
     console.log(true);
  }
}

<input type="text" onkeyup="isNumber(event);">

For better result tracking, use console.log(true) and console.log(false) within your function instead of using return false or return true.

EDIT:

To restrict your input to numbers only, utilize event.preventDefault() along with the onkeypress event. This will ensure that only numeric characters are accepted:

function isNumber(event) {
  event = (event) ? event : window.event;
  var charCode = (event.which) ? event.which : event.keyCode;
  
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
     console.log(false);
     event.preventDefault();
  }else{
     console.log(true);
  }
}

<input type="text" onkeypress="isNumber(event);">

Answer 5

Answer №3

Experience the isNumber event without using the return function. Check out the modifications in your fiddle:

<input type="text" onkeyup="isNumber(event)">

https://jsfiddle.net/btykt0nk/1/

Answer 6

Experience the isNumber event without using the return function. Check out the modifications in your fiddle:

<input type="text" onkeyup="isNumber(event)">

https://jsfiddle.net/btykt0nk/1/

The onkeyup event appears to be malfunctioning

Answer №1

Answer №2

Answer №3

Similar questions

vue-form and vue-material are not compatible with each other

JavaScript encoding the text

Navigating a JSON object using jQuery

Tips for incorporating dynamic content into React Material UI expansion panels while maintaining the ability to have only one tab active at a time

Error message: "Angular dependencies and provider not accessible"

Is there a way to asynchronously load multiple textures in three.js using a callback function?

Tips for managing Material-ui's <Autocomplete/> component based on the option's id

How can you determine if a mouseover event is triggered by a touch on a touchscreen device?

The behavior of TypeScript class inheritance differs from that of its ES6 equivalent

Is it feasible to relocate an embedded swf file from one tag to another?

Customize Meta tags in Next.js 13.4

Is it possible for a MUI control to automatically close itself when clicked outside of the component?

Best practice for passing a variable argument in a JavaScript callback?

Using jQuery, retrieve JSON data from a different domain URL, even if the JSON data is not well-structured

Equalize the color of overlapping background events with non-overlapping background events in fullcalendar

How to Retrieve URL Before Closing a jQuery Window Using window.open()?

What is the best way to add spaces between each element in an array of arrays that are nested within a map

What is the method for binding context on a click event in Vue?

Saving integer data retrieved from DynamoDB in a React Native application

"Relating to meteorjs, admin users are akin to those in