How to replace text when selected in javascript

Question

I have the below phone number validation which automatically picks up brackets based on the condition.

I have an issue here, after giving the 10 digit phone number when we try to select the whole number and start typing on top of it, length of the value remains same (14) and brackets are not picking up and condition goes wrong.

Length should be cleared in this case.

Where am I missing?

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.validatePhoneNumber = function(e){
        var key = e.charCode || e.keyCode || 0;
        //  var regex = /^[0-9.\-\(\)]*$/;
        var text = $('#phoneNumber'); 
        console.log(text.val());

        if ((e.which < 48 || e.which > 57)) {
            e.preventDefault();
        } else if (key !== 8 && key !== 9) {
            if ((text.val().length === 0) && (!e.ctrlKey)) {
                text.val(text.val() + '(');
            }
            if (text.val().length === 4) {
                text.val(text.val() + ') ');
            }
            if (text.val().length === 9) {
                text.val(text.val() + '-');
            }
        }
        return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

 <input type="text" class="input-sm form-control" id="phoneNumber"
        ng-model="search.phonenumber"  placeholder="Phone Number"
        ng-keypress="validatePhoneNumber($event)"
        ng-paste="$event.preventDefault();"
        ng-init="paste=false" maxlength="14">

</div>

your last edit broke the snippet

Dellirium
– Dellirium

2019-01-18 07:14:56 +00:00
Commented Jan 18, 2019 at 7:14 — Dellirium
– Dellirium, Commented Jan 18, 2019 at 7:14
no, its working fine

UI_Dev
– UI_Dev

2019-01-18 07:25:52 +00:00
Commented Jan 18, 2019 at 7:25 — UI_Dev
– UI_Dev, Commented Jan 18, 2019 at 7:25

Nilesh · Accepted Answer · 2019-01-18 08:17:02Z

1

I have used keyup here hope this will help you

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

 <input type="text" class="input-sm form-control" id="phoneNumber" ng-model="search.phonenumber"  placeholder="Phone Number" ng-keyup="validatePhoneNumber($event)" ng-paste="$event.preventDefault();" ng-init="paste=false" maxlength="14">

</div>
</body>
</html>

JS

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

    $scope.validatePhoneNumber = function(e) {
        var key = e.charCode || e.keyCode || 0;
        //  var regex = /^[0-9.\-\(\)]*$/;
        var text = $('#phoneNumber');
        console.log(text.val());


        if ((e.which < 48 || e.which > 57)) {
            e.preventDefault();
        }
        if(text.val().length === 1) {
          if(!isNaN(text.val())) {
            text.val('(' + text.val());
          }
        }
        if ((text.val().length === 0) && (!e.ctrlKey)) {
            text.val(text.val() + '(');
        }
        if (text.val().length === 4) {
            text.val(text.val() + ') ');
        }
        if (text.val().length === 9) {
            text.val(text.val() + '-');
        }

        return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
    }
});

edited Jan 18, 2019 at 8:17

answered Jan 18, 2019 at 8:02

Nilesh

1,19310 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nilesh Over a year ago

i have updated ng-keypress to ng-keyup and added text length == 1 check in JS part here is demo jsbin.com/didive/edit?html,js,output for your reference

antonku · Accepted Answer · 2019-01-18 08:52:14Z

You may want to take a look at angular-input-masks package. It appears to implement the required logic by ui-us-phone-number-mask directive:

var app = angular.module('myApp', ['ui.utils.masks']);
app.controller('myCtrl', function() {});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-input-masks/4.2.1/angular-input-masks-standalone.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
 <input ui-us-phone-number-mask type="text" class="input-sm form-control" id="phoneNumber" ng-model="search.phonenumber" phone-number placeholder="Phone Number" ng-paste="$event.preventDefault();" ng-init="paste=false" maxlength="14">
</div>

Collectives™ on Stack Overflow

How to replace text when selected in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related