防止输入任何其他字符

Question

我正在使用此Angular Directive来格式化输入中的电话号码(999) 999-9999.这很有效,直到用户犯了错误并修改输入的电话号码.

您可以通过运行以下代码并执行以下操作来复制此问题:

•输入电话号码(555) 123-4567
•将光标放在4字符后面并将其删除.
•键入0两次.

您可以看到0添加了两次并7删除了该字符.

另一个问题是用户是否尝试删除和更改1角色.它们的光标被推到输入的最末端.

我确定这是由于phonenumber过滤器的问题,但我不知道如何处理这个问题.

function MyCntl($scope) {
    $scope.myModel = {};
    $scope.myPrompt = "Input your phonenumber here!";
}

var phonenumberModule = angular.module('phonenumberModule', [])
 
	.directive('phonenumberDirective', ['$filter', function($filter) {
		/*
		Intended use:
			<phonenumber-directive placeholder='prompt' model='someModel.phonenumber'></phonenumber-directive>
		Where:
			someModel.phonenumber: {String} value which to bind only the numeric characters [0-9] entered
				ie, if user enters 617-2223333, value of 6172223333 will be bound to model
			prompt: {String} text to keep in placeholder when no numeric input entered
		*/
 
		function link(scope, element, attributes) {
 
			// scope.inputValue is the value of input element used in template
			scope.inputValue = scope.phonenumberModel;
 
			scope.$watch('inputValue', function(value, oldValue) {
				
				value = String(value);
				var number = value.replace(/[^0-9]+/g, '');
				scope.phonenumberModel = number;
				scope.inputValue = $filter('phonenumber')(number);
			});
		}
		
		return {
			link: link,
			restrict: 'E',
			scope: {
				phonenumberPlaceholder: '=placeholder',
				phonenumberModel: '=model',
			},
			//templateUrl: '/static/phonenumberModule/template.html',
			
            template: '<input name="phonenumber" ng-model="inputValue" type="tel" class="phonenumber" placeholder="{{phonenumberPlaceholder}}" title="Phonenumber (Format: (999) 9999-9999)">',
		};
	}])
 
	.filter('phonenumber', function() {
	    /* 
	    Format phonenumber as: c (xxx) xxx-xxxx
	    	or as close as possible if phonenumber length is not 10
	    	if c is not '1' (country code not USA), does not use country code
	    */
	    
	    return function (number) {
		    /* 
		    @param {Number | String} number - Number that will be formatted as telephone number
		    Returns formatted number: (###) ###-####
		    	if number.length < 4: ###
		    	else if number.length < 7: (###) ###
 
		    Does not handle country codes that are not '1' (USA)
		    */
	        if (!number) { return ''; }
 
	        number = String(number);
 
	        // Will return formattedNumber. 
	        // If phonenumber isn't longer than an area code, just show number
	        var formattedNumber = number;
 
			// if the first character is '1', strip it out and add it back
			var c = (number[0] == '1') ? '1 ' : '';
			number = number[0] == '1' ? number.slice(1) : number;
 
			// # (###) ###-#### as c (area) front-end
			var area = number.substring(0,3);
			var front = number.substring(3, 6);
			var end = number.substring(6, 10);
 
			if (front) {
				formattedNumber = (c + "(" + area + ") " + front);	
			}
			if (end) {
				formattedNumber += ("-" + end);
			}
			return formattedNumber;
	    };
	});

.phonenumber {
    min-width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="phonenumberModule" ng-controller="MyCntl">
    <p>phonenumber value: {{ myModel.phonenumber }}</p>
    <p>formatted phonenumber: {{ myModel.phonenumber | phonenumber }}</p>
    <form name="phoneForm">
        <phonenumber-directive placeholder="myPrompt" model='myModel.phonenumber'></phonenumber-directive>
        <div ng-show="phoneForm.phonenumber.$error.minlength">
          <p>Enter a valid phone number</p>
        </div>
    </form>
</div>

Answer 1

在键入时修改用户的输入可能会分散注意力,并且总会导致您描述的问题.

通常,更容易实现,而不是让用户更难以修改UI.电话号码的常见解决方案是并排放置三个输入字段,格式字符显示在中间.

使用Angular,可以创建单个指令来包装此多部分输入机制,并将单个连接结果公开给应用程序的其余部分.

Answer 2

你能检查一下plunker吗...我希望这就是你想要的..

http://plnkr.co/edit/0IBJBRb2JtvZnq6PtBiV?p=preview

支持掩码和正则表达式..（是测试版）用法：#对于两者，a对于字符，9对于数字......（掩码过滤器不起作用，因为接受将检查它..

 <maskinput ng-mask-model="value" ng-mask="9 (999) 99-9999" ng-mask-regex="[^0-9]+"></maskinput>