Tips for substituting commas and slashes within an input text box

For instance, if the input is "1,23/456", the output should be "123456".

When "1,23/456" is entered into the input field and "enter" is pressed, it should automatically convert to "123456".

<input id="Id" ng-model="Id" name="searchInput" type="text">

Answer №1

When dealing with numeric inputs, the slash is automatically rejected. However, I encountered compatibility issues with number fields while testing in IE.

To address this, you can set up an ng-change or ng-blur event callback on your input field and define the callback function accordingly.

$scope.onInputBlur = function(){
  //$scope.value is the model for your field
  $scope.value = $scope.value.replace(/,/,'','g'); // remove commas
  $scope.value = $scope.value.replace(/\//,'','g'); // remove slashes
}

I hope this solution proves helpful. :)

Answer №2

Utilize the <input type="number" /> element or cleanse the data model by applying a regular expression.

console.log('1,23/456'.replace(/[^0-9]/g, ''));

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

What could be causing the jQuery effect to not function properly?

After completing a course on Codecademy, I successfully ran the code. However, I prefer to copy and paste the code into my own jquery folder for future reference and practice. The objective of this project was to make the element 'krypton' bounc ...

What methods can be employed to reduce additional background tasks when altering a state in a React component?

Trying out Code I experimented with creating a React exercise code that showcases a bus and its seats. Reserved seats are marked in red and cannot be selected, while the remaining seats can be chosen by clicking on them and selecting a gender from a popup ...

When using Mongoose's save function within an async.each loop, it may

While working on an array processing task that involves saving and validating data asynchronously, I encountered an issue with duplicates. Here is the data I'm currently processing: var guests = [{ "email": "<a href="/cdn-cgi/l/email-protection" ...

Ways to verify if an email has been viewed through the client-side perspective

How can I determine if an email has been read on the client side using PHP? I need to verify if emails sent by me have been opened by recipients on their end. Additionally, I would like to extract the following details from the client's machine: 1. ...

Arranging grid elements in Material-UI

Currently, I am in the process of transforming a JavaFx window into a web application using React.js & Material Ui. The goal is to replicate the appearance and functionality of the original JavaFx application as closely as possible. The layout of the wind ...

How to make a specific table row stand out using AngularJS and CSS

Can you provide advice on how to highlight a specific row in a table? I have a table along with some angular code snippets. Here's an example: angular.module('myApp', []).controller('myTest', function($scope) { var data = []; ...

Unable to locate "Gruntfile.js" Node module for task execution

I am currently in the process of developing a module that enables node to execute Grunt tasks via the command line. This Node module is globally installed at : C:\Users\pcharpin\AppData\Roaming\npm\node_modules\task-app ...

What is the best way to display an HTML file in Express when utilizing React as the frontend?

As a newcomer to the world of web development, I'm facing a seemingly simple issue that is consuming much of my time. I have set up an express server to run React on the front end. To achieve this, I use webpack and bundle to parse my react app, and ...

Sending Ajax data to a controller function

I am looking for guidance on how to pass values from my view to my controller using ajax. As someone who is new to working with ajax, I would appreciate some assistance in understanding the process. Full Page @model ALSummary.Models.MonthReport @{ ...

Conceal a plugin within a component from the main module of app.js

While this might be considered outdated, there are still many experienced front-end developers who have the knowledge to tackle it. I am attempting to avoid declaring a plugin in the main module of my application. Imagine I have structured the following ...

The jspdf tool tries to cram my extensive data into a single page, resulting in an overcrowded and barely visible PDF document

My PDF generated using Jspdf is being forced to fit in one page, making it difficult to see all the data because there is a huge amount of information present. To view the issue, please visit this link: https://jsfiddle.net/frost000/04qt7gsm/21/ var pdf ...

Linking the location of the pop-up to the currently selected text box

I am currently experimenting with setting the top and left values relative to the selected_element (which is active at the time of triggering the popup) in a manner similar to a tooltip. I attempted to use $().position() in combination with jQuery, but it ...

Stopping all animations with JQuery animate()

I have a question about stopping multiple animations. Here's some pseudocode to illustrate my situation: CSS #div1 { position: absolute; background-image: url("gfx/cat.jpg"); width: 60px; height: 70px; background-size: 50%; b ...

"Effortlessly move elements with HTML5 drag and drop functionality from either direction

I'm working on an application that requires Html5 Drag and Drop functionality, which is currently functioning well. However, in the app, there may be instances where a dropped item is no longer needed and I want to allow users to re-drag and drop it b ...

Challenges encountered when redirecting users with a combination of javascript and php

I have a login form that triggers a JavaScript function upon submission. This function calls a PHP page to process the input. The issue I'm facing is with how the redirections are displayed based on the user's role type. It attempts to display t ...

Challenges with the Sumo Select Refresh Feature

I am having trouble with Sumo select not refreshing the data properly. The action method is returning the correct list, but it seems like the JQUERY multi-select rebuild() function is missing. Is there something I'm overlooking? $("#ddlCountry&q ...

Trigger a random tune when hovering the mouse

I need help figuring out how to make a fixed image on my page trigger a random sound track when hovered over. The sound could be one of five different tracks. Here is the HTML for my image: <img src="images/Airplane.png" class="Airplane-photo"> Bel ...

Tips for regularly retrieving information from a psql table

I have a scenario where I am retrieving data from a psql table and converting it into a JSON array to be used for displaying a time series chart using JavaScript. The data that is passed needs to be in the form of an array. Since the data in the table get ...

When setting up a new nodejs/express project, I encountered an issue where the fresh installation would fail

After setting up node and express on my new development server, I created a test application by running the command below: dev-server15:/var/www# express mytest create : mytest create : mytest/package.json create : mytest/app.js ... The npm ...

What might be preventing combineLatest from executing?

Currently, I am attempting to run a block of code utilizing the combineLatest function. Within my translation library, there exists an RXJS Observable that is returned. Imported as individual functions are combineLatest, map, and tap. combineLatest(this. ...