Use jQuery to implement an input box that only allows numbers and decimal points to be entered

Implement jQuery input box to limit the input of numbers and decimal points

In web development, we often encounter the need to control the content entered by the user in the input box, such as Limit input to numbers and decimal points only. This restriction can be achieved through JavaScript and jQuery. The following will introduce how to use jQuery to implement the function of limiting the input of numbers and decimal points in the input box.

1. HTML structure

First, we need to create an input box in HTML, the code is as follows:

<input type="text" id="inputNumber" placeholder="只能输入数字和小数点">

Here we create an input box with the id "inputNumber" , and set the placeholder attribute to "Only numbers and decimal points can be entered" to prompt the user that only numbers and decimal points can be entered.

2. jQuery implements the input restriction function

Next, we use jQuery to implement the input restriction function. The code is as follows:

$(document).ready(function(){
  $('#inputNumber').keypress(function(event) {
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
      event.preventDefault();
    } else {
      var input = $(this).val();
      if ((charCode == 46 && input.indexOf('.') !== -1) || (charCode == 46 && input === "")) {
        event.preventDefault();
      }
    }
  });
});

In the above code, first use the $(document).ready() function to ensure that the DOM is loaded before executing the jQuery code. Then use the keypress() function to monitor the keyboard press event of the input box. In the event processing function, use event.which or event.keyCode to get the ASCII code of the key, and then determine whether the input is a number or decimal point. If not, block the default event.

It should be noted that to handle the decimal point situation, if the input box already has a decimal point, it needs to be prevented from entering the decimal point again or the decimal point input is at the beginning of the input box.

3. Test

Finally, let’s test the code. Open the HTML page containing the above code in the browser and try to enter other characters in the input box to ensure that only numbers and decimal points can be entered.

Through this operation, we can use jQuery to limit the input box to only numbers and decimal points. This can effectively help users input specifications and improve user experience. I hope the above content can help you implement the corresponding functions.

The above is the detailed content of Use jQuery to implement an input box that only allows numbers and decimal points to be entered. For more information, please follow other related articles on the PHP Chinese website!