I want to allow only numbers to be entered into a TextBox using JavaScript without the need to disable right-click

Is it possible to restrict a textbox to only allow numbers by utilizing the onkeydown event to prevent non-numeric input and disable ctrl+V? However, two issues arise:

  1. If someone right-clicks and pastes, any character can be entered. Is there a solution that doesn't involve disabling right-click with oncontextmenu="return false;"?

  2. When text is dragged and dropped into the textbox, it bypasses the numeric restriction. How can this be prevented?

Is there a universal solution that works seamlessly in all browsers without encountering these issues?

javascriptasp.netvalidationdom-events

Answer №1

Remove any non-numeric characters in the textbox's onchange event and then update the content of the textbox accordingly.

Answer №2

Utilize the onpaste event to detect pasted content in real time. Check out Andy's detailed explanation on using the onpaste event effectively.

Answer №3

In a recent project, I utilized jquery to achieve this functionality. Below is the code snippet that should be included in your HTML, along with the necessary jquery file.

<script type="text/javascript" src="js/vendor/jquery.validate.min.js"></script>

Make sure to include the following script in your HTML document:

<script>
$('#phoneNum').keypress(function(e) {
    var allowedKeys = [];
    var keyPressed = e.which;

    for (i = 48; i < 58; i++)
        allowedKeys.push(i);

    if (!(allowedKeys.indexOf(keyPressed) >= 0))
    {
        if(keyPressed != 45){
            e.preventDefault();
        }
    }
});
</script>

The input field in your HTML will look like this, with "phoneNum" as the id:

<input type="tel" id="phoneNum" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The property 'match' is undefined and cannot be read by Object.j during rendering in angular-datatables.min.js at line 6

I am currently using angular-datatables.min.js for my data table, but I have encountered an error that I have been unable to resolve. Is there anyone who can provide assistance with this issue? App.controller('DailyTaskListController', ['$s ...

javascriptjqueryajaxangularjsdatatables

Problem with using React state hook

Trying to implement the state hook for material-ui's onChange feature to manage error texts, I encountered an issue. I have included a screenshot of the error displayed in the console. https://i.sstatic.net/qjed8.png Below is the snippet of my code: ...

javascriptreactjsmaterial-uireact-hookstextfield

Update user control attribute based on a calendar event

Within the code snippet provided, the method calling the property change is SetCaloriesBurnedStats(selectedDate), and everything else appears to be functioning correctly. An example of a simple user control is as follows: public string BigText { get; set ...

c#asp.netwebforms

Error: User cannot be used as a constructor

When attempting to register a user using a Node.js app and MongoDB, I encountered the following error message: const utente = new Utente({ ||||| TypeError: Utente is not a constructor This is my model file, utente.js: const mongoose = require("mongoose") ...

javascriptnode.jsmongodbexpress

What is the best way to reveal information from an object in Javascript?

For debugging purposes, I need to extract the variables stored in connectData. Despite checking the type with 'typeof', I have found that when I try to access connectData[1] thinking it's an array, it returns undefined. If I simply want to ...

javascriptnode.js

Getting the length of child elements in Angular using ngFor loop

Can anyone help me figure out how to check the length of a child element in my Angular *ngFor loop? I am fetching data from a real-time firebase database. What am I doing wrong? Here is the code snippet I am using: <div *ngFor="let event of events"> ...

javascriptangularfirebasefirebase-realtime-databaseangularfire2

Adding an Image to an InfoWindow on Google Maps

Hey there! I'm attempting to insert an image into a Google Maps infoWindow. Here's my code snippet: var ContactUs = function () { return { //main function to initiate the module init: function () { var map; $(document). ...

javascripthtmlimagegoogle-mapsinfowindow

Customizing Sphere Hues Individually in three.js

Within my scene, a unique arrangement of 7 spheres creates a flower petal formation. The setup includes 6 spheres around the perimeter and one sphere at the center. I aimed to randomize the color of each sphere individually. Below is the code snippet utili ...

javascriptthree.js

There is a possibility of encountering an endless update loop in the watcher when utilizing the expression "tabs" error in vue

My code includes a watcher on tabs to prevent them from changing based on the values of the edit. If edit is false, then go to the next tab; otherwise, prevent the change. However, when I try to click on the tab heading to change the tab, I encounter an er ...

javascriptvue.js

Using vanilla JavaScript, make a Cross-Origin Resource Sharing (CORS) POST request to

I encountered a CORS issue while using the Google Speech API. I am trying to send an audio file (POST request) to https://www.google.com/speech-api/v2/recognize?xjerr=1&client=chromium&lang=en-US&maxresults=10&pfilter=0&xjerr=1&ke ...

javascriptgoogle-apihttp-postcors

Utilizing jQuery and DOM to interact with form elements

Below is the form content <form method="post"> <input type="hidden" name="resulttype" value="Create"> <table> <tr> <td>Full Name</td> <td><input ...

javascriptjqueryhtmldom

How can VueX be leveraged to add an item to an array and also delete an item from the same array?

https://stackblitz.com/edit/vue-script-setup-with-vuex-gfjaff?file=src/components/UserProfile.vue I'm currently working on a feature where I can input a name into a dispatch function and have it added to an array. Eventually, I plan to include a text ...

javascriptarraysvue.jsvuex

Ensuring security against cross site scripting attacks on window.location.href

Currently, I'm utilizing window.location.href to redirect the page to an external URL: <Route exact path={rootUrl} component={() => { window.location.href =`https://${window.location.hostname}/www/testurl?google=true`; return null; }} /> How ...

javascriptreactjsxss

JavaScript template engines that rely on the DOM tree system

I am in search of a modern JavaScript template engine to upgrade from the outdated jQuery Template for my client-side templating requirements. I am leaning towards an approach where the template engine directly works with DOM trees instead of manipulating ...

javascriptjquerytemplatesdommustache

Automatically populate input field with value from a different input field

I'm facing an issue: <table> <?php $data['criteria'] = array('GPA', 'SEMESTER', 'INCOME', 'OTHER SCHOLARSHIP'); $criteria = array(); foreach ($data['criteria& ...

javascriptphpjqueryarraysinput

What is the process for running a continuous stream listener in a node.js function?

I am currently working with a file called stream.ts: require('envkey') import Twitter from 'twitter-lite'; const mainFn = async () => { const client = new Twitter({ consumer_key: process.env['TWITTER_CONSUMER_KEY'], ...

javascriptnode.jstypescriptstream

Incorporate JSON data using jQuery's AJAX in MVC3

I need assistance with parsing the JSON data retrieved from a webservice through my controller. Currently, I am displaying the entire JSON string in a div as text. However, I only want to extract specific values such as "color" and "size". I am unsure of ...

javascriptjsonasp.net-mvc-3

Prevent automatic form filling in ASP.NET C# by disabling browser autocomplete for textboxes

Is there a way to prevent browsers from autocompleting textboxes in an ASP.NET C# application? I've attempted using the following jQuery code, but it doesn't seem to be working: $(document).ready(function () { $("input[type=text]").attr("aut ...

javascriptc#jqueryasp.netc#-4.0

Guide to configuring Javascript as a Blade template for integration into an API endpoint

I am currently developing a Javascript program that is loaded through an external include. Here's how it looks: <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> ...html code goes here... & ...

javascriptphplaravellaravel-bladeabstraction

The functionality of socket.io is not functioning properly on the server, resulting in a 404

I encountered errors while working on a simple socket.io project on my server. The IP address I am using is . All files are stored in public_html and can be accessed through the URL: . Here are the code snippets: <!doctype html> <html> < ...

javascriptnode.jssocketsexpresssocket.io