How can I restrict input to only numerical digits?

Can someone assist with fixing this script?

html:

<input type="text" ng-model="phone" id="phoneInput" ng-change="apt.changePhoneInput(phone)">

js:

var app = angular.module('app', []);
app.controller('Appctrl', Appctrl, '$scope');
function Appctrl($scope){
  this.changePhoneInput = function(phone) {
    var result = phone;
    console.log('phone', phone);
    result.replace(/[^+0-9\(\)]/gim,'');
    console.log('result', result);
    $scope.phone = result;
  };
}

JSFIDDLE

I am aiming to allow only numbers and specific symbols like '+', '(', ')', '-' in the input field. However, it seems like the replace function is not working properly after the entry of certain symbols.

Answer №1

Ensure the result variable is properly assigned after removing characters that are not numbers:

result=result.replace(/[^+0-9\(\)-]/gim,'');

After making this adjustment, your controller code should look like this:

var app = angular.module('app', []);
app.controller('Appctrl', Appctrl, '$scope');
function Appctrl($scope){
  this.changePhoneInput = function(phone) {
    var result = phone;
    console.log('phone', phone);
    result=result.replace(/[^+0-9\(\)-]/gim,'');
    console.log('result', result);
    $scope.phone = result;
  };
}

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

Sending Data via Ajax

I am currently working on implementing an ajax invitation script that allows users to invite their friends to an event. The javascript code I have used in other parts of the website works perfectly, but for some reason, it is not functioning correctly in t ...

My objective is to close a menu that is currently open by clicking on the child element of the parent

My jQuery code is functioning properly, but I am aiming to have the child ul close only when I specifically click on it; currently, it closes when I click on the parent li as well. How can I make this adjustment to the behavior? http://jsfiddle.net/c4k5w/ ...

Vibrant or Rich Tones for Your Website Design

I need help creating a JavaScript function that takes a hex color code as input and determines whether the color is closer to black (returning true) or closer to white (returning false). Does anyone have any suggestions on how I can achieve this? ...

Encountering issues with the addEventListener function in a React application

Here's the scenario: I'm currently working on integrating a custom web component into a React application and I'm facing some challenges when it comes to handling events from this web component. It seems that the usual way of handling events ...

Creating a soft focus effect in a specific region (behind the text)

While working on my homepage created with HTML/CSS/Javascript, I have text positioned at the top left corner of the screen. The challenge arises from the fact that I am using different backgrounds sourced from Reddit, and a script randomly selects one duri ...

Exploring JSON Data with the Wikipedia API

My current project involves extracting text from Wikipedia articles using their API, which is not the most user-friendly tool. I am facing challenges with parsing the JSON object that I receive in return. The key containing the desired text is labeled &apo ...

Conceal on External Click with AngularJS

My code looks something like this... I am using the 'left-menu-active' class to toggle the menu in css... I have two issues and I am looking to resolve them using angular js... I want to dynamically add a class to the parent element using angu ...

Using the class attribute for Pagedown instead of the id keyword

I am utilizing Pagedown, which necessitates giving the id wmd-input to a textarea. This requirement is outlined in Markdown.Editor.js as follows: function PanelCollection(postfix) { this.buttonBar = doc.getElementById("wmd-button-bar" + postfix); ...

Using a function as a parameter in Typescript: Anticipated no arguments, received 1.ts

I'm encountering an issue when trying to pass the doSomething function into performAction. The error message I'm receiving is Expected 0 arguments, but got 1 interface SomeInterface { name: string, id: string } function doSomethingFunction( ...

Transforming .POST into corresponding .AJAX techniques

I'm currently attempting to convert a .post javascript call into an equivalent .ajax call in order to make it asynchronous. However, I'm running into some issues and can't seem to get it to work. The original working .post call looks like th ...

Understanding the server's response in a web API

As I embark on developing a Web API in MVC with AngularJS for the very first time, I am eager to figure out how to display the response message on the client side, giving users insight into what is currently taking place. Take a look at the code snippet b ...

Transfer groups between divisions

In my HTML structure, I have two main divs named Group1 and Group2. Each of these group divs contains at least two inner divs, all with the class .grp_item. Currently, the grp_item class is set to display:none, except for one div in each group that has a c ...

What could be causing my vue-router to fail in displaying my files?

I recently incorporated the Vue-router into my Vue project by using the command npm install vue-router@latest. However, I am facing an issue as it seems to not be functioning properly. When I look at my router.js file, it appears like this: import Vue ...

Jest is a powerful tool for testing AngularJS applications

I am currently experimenting with simulating HTTP requests for AngularJS in Jest. Presently, I have a service structured like this: public UserService(user) { let url = this.env.getUserEndpoint("/users"); let deferred = this.$q.defer<any> ...

Bootstrap not being recognized in AngularJS HTML

I've been working on learning AngularJS, but unfortunately I can't seem to get any Bootstrap themes to show up in my web application. Here is the HTML code for the header that I've been trying: <nav class="navbar navbar-default"> ...

Angular UI Routing is not compatible with Switch functionality

I am currently working on an Angular app that utilizes Angular UI Routing along with a UI plug-in that features "checkbox switches" based on bootstrap switches. The issue arises when the templates load after the shell page, causing the switches to break a ...

Challenges in communication between jQuery/JavaScript and PHP

Currently, I am in the process of setting up a basic client/server communication using jQuery/JavaScript and PHP. Everything is functioning smoothly until a period '.' is present in the data. I have experimented with the following scenarios: as ...

Make sure two elements are siblings in JavaScript / jQuery

Looking at the HTML structure below: <div class="wrap"> <div id="a"></div> <div id="b"></div> </div> A statement is presented as false: ($('#a').parent() == $('#b').parent()); //=> false ...

Add a personalized header to the request sent from the <img/> element

Suppose you have a code snippet similar to this: <img src='images/whatever.jpj' width='' height=''/> Is there a way to set up custom headers for this specific request? I would be grateful for any guidance on this matt ...

Is it possible to use TypeScript in a React Native project with a JavaScript file?

Currently, I am learning React Native by working on app clones like Instagram and YouTube. I have recently started an AirBnb clone project, but I'm facing some issues with the initial build. One issue I noticed is that in 'App.js', the temp ...