How to Allow Only 4-digit Numbers in Textbox using JQuery?

Introduction

Have you ever wanted to restrict the input in a textbox to only allow 4-digit numbers? In this tutorial, we will explore how to achieve this using JQuery, a popular JavaScript library. By following the steps below, you will be able to enhance the user experience on your website by ensuring that users can only enter valid 4-digit numbers.

Step:- Create a HTML Page

<!DOCTYPE html>
<html>
<head>
    <title>Allow only 4 numbers in textbox using Jquery - wizbrand</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body> 
    
<form>
  <h1>Allow only 4 numbers in textbox using Jquery - wizbrand</h1>
  <input type="text" name="phone" placeholder="4-digit numbers" maxlength="4" class="phone">
     
  <button type="submit">Submit</button>
</form>
    
</body>
    
<script type="text/javascript">
  $('.phone').keypress(function(e) {
      var arr = [];
      var kk = e.which;
   
      for (i = 48; i < 58; i++)
          arr.push(i);
   
      if (!(arr.indexOf(kk)>=0))
          e.preventDefault();
  });
</script>
</html>

Output:-

Hopefully, It will help you to set a password..!!!

Related Posts

Advanced Certified MLOps Professional Program for Scalable AI Model Deployment Systems

Introduction The Certified MLOps Professional program from AIOpsSchool has emerged as a vital benchmark for engineers looking to bridge the gap between data science and production engineering….

Read More

Powerful Certified MLOps Engineer Program to Build Reliable ML Infrastructure

Introduction The integration of Machine Learning into production environments has created a significant gap between data science and traditional software engineering. The Certified MLOps Engineer program is…

Read More

Professional Skill Alignment Around MLOps Foundation Certification in Modern Workplaces

Introduction The MLOps Foundation Certification has emerged as a critical benchmark for professionals looking to bridge the gap between data science and production engineering. This guide is…

Read More

Certified AIOps Manager: Strategic Framework for Intelligent IT Operations

Introduction The Certified AIOps Manager program is a specialized training designed to help professionals lead the next wave of IT operations. This guide is for engineers and…

Read More

Advanced AIOps Architect Certification Roadmap for DevOps Engineers

Introduction The Certified AIOps Architect is a comprehensive professional program designed for engineers and architects who want to master the intersection of Artificial Intelligence and IT Operations….

Read More

Advanced Certified AIOps Professional Guide for Mastering AI Driven Operations Skills

Introduction Artificial Intelligence for IT Operations is the future of managing complex systems and large scale digital environments. The Certified AIOps Professional program is designed for those…

Read More
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x