How to limit the input box to only input pure numbers in HTML

How to limit the input box to only input pure numbers in HTML

Limit input box to only pure numbers

1、onkeyup = "value=value.replace(/[^\d]/g,'')"

There is bug when using the onkeyup event. In the Chinese input method, if you enter a Chinese character and then press Enter, the letter will be entered directly.

2、onchange = "value=value.replace(/[^\d]/g,'')"

When using onchange event, after entering content, the result will only be obtained when input loses focus, and it will not respond when entering.

3、oninput = "value=value.replace(/[^\d]/g,'')"

Using oninput event perfectly solves the above two problems, and no other problems have occurred in the test so far.

Code Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>input</title>
</head>
<body>
    An input box that can only input pure numbers: <input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')">
</body>
</html>

This is the end of this article about how to limit the input box in HTML to only input pure numbers. For more relevant HTML content about limiting input to numbers, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  Detailed explanation of the role of overflow:hidden (overflow hiding, clearing floats, solving margin collapse)

>>:  An example of implementing a simple finger click animation with CSS3 Animation

Recommend

Introduction to vim plugin installation under Linux system

Table of contents Install vim plugin manager Add ...

How to use Zen coding in Dreamweaver

After I published my last article “Zen Coding: A Q...

Json string + Cookie + localstorage in JS

Table of contents 1.Json string 1.1Json Syntax 1....

How to install MySQL 5.7 from source code in CentOS 7 environment

This article describes how to install MySQL 5.7 f...

Mini Program to Implement Text Circular Scrolling Animation

This article shares the specific code of the appl...

A brief discussion on Flink's fault-tolerant mechanism: job execution and daemon

Table of contents 1. Job Execution Fault Toleranc...

Detailed explanation of how to find the location of the nginx configuration file

How can you find the location of the configuratio...

Docker installation and deployment example on Linux

After reading the following article, you can depl...

Invalid solution when defining multiple class attributes in HTML

In the process of writing HTML, we often define mu...

One sql statement completes MySQL deduplication and keeps one

A few days ago, when I was working on a requireme...

How to quickly install and deploy MySQL in Windows system (green free installation version)

First, download the green free installation versi...

Steps to set up and mount shared folders on Windows host and Docker container

Programs in Docker containers often need to acces...

WeChat applet realizes taking photos and selecting pictures from albums

This article shares the specific code for WeChat ...

Vue3 uses axios interceptor to print front-end logs

Table of contents 1. Introduction 2. Use axios in...

Summary of methods for finding and deleting duplicate data in MySQL tables

Sometimes we save a lot of duplicate data in the ...