반응형
추가 문자 입력 금지
이 각도 지시어를 사용하여 입력할 전화 번호 형식을 지정합니다.(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>입력할 때 사용자의 입력을 수정하는 것은 주의를 산만하게 할 수 있으며 항상 설명한 것과 같은 문제로 이어질 수 있습니다.
일반적으로 UI를 수정하는 것이 더 쉽고 사용자에게 짜증을 줄 수 있습니다.전화번호의 경우 일반적인 해결책은 형식 지정 문자를 사이에 두고 세 개의 입력 필드를 나란히 두는 것입니다.
각도를 사용하면 이 다중 부분 입력 메커니즘을 래핑하고 하나의 연결된 결과를 앱의 나머지 부분에 노출하는 하나의 지시문을 만들 수 있습니다.
숫자를 입력하려면 편집 가능한 필드(타입 텍스트 입력과 같은)를 사용하고 형식화된 값은 표시 문제이므로 편집할 수 없기 때문에 형식화된 값을 표시하려면 읽기 전용 필드(라벨과 같은)를 사용해야 한다고 생각합니다.
그래서 그걸 하기 위해 당신의 토막을 수정했습니다.
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);
oldValue = String(oldValue);
// get rid of input non digits chars
var number = value.replace(/[^0-9]+/g, '');
var oldNumber = oldValue.replace(/[^0-9]+/g, '');
var filteredNumber = $filter('phonenumber')(number);
// get rid of filter non digits chars
scope.phonenumberModel = filteredNumber.replace(/[^0-9]+/g, '');
inputValue = scope.phonenumberModel;
var filteredOldNumber = $filter('phonenumber')(oldNumber);
if(filteredNumber.length === filteredOldNumber.length) {
scope.maxlength = filteredNumber.length;
}
else {
scope.maxlength = Math.max(number.length, 11);
}
});
}
return {
link: link,
restrict: 'E',
scope: {
phonenumberPlaceholder: '=placeholder',
phonenumberModel: '=model',
},
//templateUrl: '/static/phonenumberModule/template.html',
template: '<input name="phonenumber" ng-model="inputValue" type="tel" maxlength="{{maxlength || 11}}" class="phonenumber" placeholder="{{phonenumberPlaceholder}}" title="Phonenumber (Format: (999) 9999-9999)"> <label>Formatted:{{inputValue | phonenumber}}</label>',
};
}])
.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>플렁커를 확인해 주실 수 있나요? 저는 이것이 당신이 원하는 것이기를 바랍니다.
http://plnkr.co/edit/0IBJBRb2JtvZnq6PtBiV?p=preview
마스크 및 정규식 지원..(is beta) 사용량 : # 둘 다, a는 문자, 9는 숫자... (마스크 필터가 허용된 대로 작동하지 않음) 확인합니다.
<maskinput ng-mask-model="value" ng-mask="9 (999) 99-9999" ng-mask-regex="[^0-9]+"></maskinput>
언급URL : https://stackoverflow.com/questions/31460859/prevent-entering-any-additional-characters
반응형
'programing' 카테고리의 다른 글
| 'utf8' 코덱이 바이트 0 xf3을 디코딩할 수 없습니다. (0) | 2023.11.04 |
|---|---|
| 알려진 두 문자열 사이의 문자열을 선택하는 SQL 쿼리 (0) | 2023.11.04 |
| JPA 2.1 / 최대 절전 모드 4를 사용하여 저장 프로시저에 값 목록 전달 (0) | 2023.11.04 |
| html 웹 페이지의 모든 요소에 대해 글꼴 속성을 지정하는 방법은 무엇입니까? (0) | 2023.11.04 |
| gcc를 사용하여 c 프로그램을 컴파일할 때 충돌하는 유형 오류 (0) | 2023.10.30 |