Question

我有以下电话号码验证，可根据情况自动提取括号。

我在这里遇到了一个问题，当我们尝试选择整个数字并开始在其上输入时，给出了10位数字的电话号码后，值的长度保持不变（14），括号没有变，情况就变了错误的。

在这种情况下，应清除长度。

我在哪里失踪？

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>

Answer 1

我在这里使用过keyup，希望对您有帮助

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

Answer 2

您可能想看看angular-input-masks软件包。它似乎通过ui-us-phone-number-mask指令实现了所需的逻辑：

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>

在javascript中选择时如何替换文本

2 个答案: