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 Jan 18 '19 at 07:14 — Dellirium, Jan 18 '19 at 07:14

Nil · Answer 1 · 2019-01-18T08:17:02.680

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));
    }
});

i have updated ng-keypress to ng-keyup and added text length == 1 check in JS part here is demo https://jsbin.com/didive/edit?html,js,output for your reference — Nil, Jan 19 '19 at 18:16

score 1 · Answer 2 · answered Jan 18 '19 at 08:52

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>

How to replace text when selected in javascript

2 Answers2