javascript - 防止输入任何附加字符

Question

我正在使用此 Angular Directive 来格式化输入中的电话号码 (999) 999-9999。在用户犯错误并修改输入的电话号码之前，这种方法非常有效。

您可以通过运行下面的代码并执行以下操作来重现此问题:

• 输入电话号码(555) 123-4567
• 将光标置于4 字符后并将其删除。
• 输入0 两次。

您可以看到 0 添加了两次，并且 7 字符被删除。

另一个问题是用户是否尝试删除并更改 1 字符。他们的光标被推到输入的最后。

我确信这是由于电话号码过滤器的问题造成的，但我不确定如何解决这个问题。

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，可以创建单个指令来包装此多部分输入机制，并向应用程序的其余部分公开单个串联结果。