Formatieren von Telefon- und Kreditkartennummern in AngularJS
https://stackoverflow.com//questions/12700145
-
12-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Frage eins (Formatierung der Telefonnummer):
Ich muss eine Telefonnummer in AngularJS formatieren, aber es gibt keinen Filter dafür.Gibt es eine Möglichkeit, Filter oder Währung zu verwenden, um 10 Ziffern zu formatieren (555) 555-5255?und trotzdem den Datentyp des Feldes als Ganzzahl beibehalten?
Frage zwei (Maskierung der Kreditkartennummer):
Ich habe ein Kreditkartenfeld, das AngularJS zugeordnet ist, wie z:
<input type="text" ng-model="customer.creditCardNumber">
welches gibt die ganze Nummer zurück (4111111111111111).Ich möchte es mit xxx die ersten 12 Ziffern maskieren und nur die letzten 4 anzeigen.Ich habe darüber nachgedacht, Filter zu verwenden:limit dafür, aber mir ist nicht klar wie.Irgendwelche Ideen?Gibt es eine Möglichkeit, die Zahl auch mit Bindestrichen zu formatieren, aber den Datentyp weiterhin als Ganzzahl beizubehalten?irgendwie 4111-1111-1111-1111.
Lösung
Wenn Sie die Telefonnummer nur bei der Ausgabe formatieren müssen, können Sie auch einen benutzerdefinierten Filter wie diesen verwenden:
angular.module('ng').filter('tel', function () {
return function (tel) {
if (!tel) { return ''; }
var value = tel.toString().trim().replace(/^\+/, '');
if (value.match(/[^0-9]/)) {
return tel;
}
var country, city, number;
switch (value.length) {
case 10: // +1PPP####### -> C (PPP) ###-####
country = 1;
city = value.slice(0, 3);
number = value.slice(3);
break;
case 11: // +CPPP####### -> CCC (PP) ###-####
country = value[0];
city = value.slice(1, 4);
number = value.slice(4);
break;
case 12: // +CCCPP####### -> CCC (PP) ###-####
country = value.slice(0, 3);
city = value.slice(3, 5);
number = value.slice(5);
break;
default:
return tel;
}
if (country == 1) {
country = "";
}
number = number.slice(0, 3) + '-' + number.slice(3);
return (country + " (" + city + ") " + number).trim();
};
});
Dann können Sie diesen Filter in Ihrer Vorlage verwenden:
{{ phoneNumber | tel }}
<span ng-bind="phoneNumber | tel"></span>
Andere Tipps
Ich habe ein AngularJS-Modul erstellt, um dieses Problem in Bezug auf Telefonnummern für mich selbst mit einer benutzerdefinierten Direktive und einem zugehörigen Filter zu lösen.
jsfiddle-Beispiel: http://jsfiddle.net/aberke/s0xpkgmq/
Beispiel für die Verwendung von Filtern: <p>{{ phonenumberValue | phonenumber }}</p>
Code filtern:
.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;
};
});
Beispiel für die Verwendung von Direktiven:
<phonenumber-directive placeholder="'Input phonenumber here'" model='myModel.phonenumber'></phonenumber-directive>
Richtliniencode:
.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 ng-model="inputValue" type="tel" class="phonenumber" placeholder="{{phonenumberPlaceholder}}" title="Phonenumber (Format: (999) 9999-9999)">',
};
}])
Vollständiger Code mit Modul und wie man es benutzt:https://gist.github.com/aberke/042eef0f37dba1138f9e
Wie shailbenq vorgeschlagen hat, telefonformat ist genial.
Fügen Sie das Telefonformat in Ihre Website ein.Erstellen Sie einen Filter für das Angular-Modul oder Ihre Anwendung.
angular.module('ng')
.filter('tel', function () {
return function (phoneNumber) {
if (!phoneNumber)
return phoneNumber;
return formatLocal('US', phoneNumber);
}
});
Dann können Sie den Filter in Ihrem HTML verwenden.
{{phone|tel}}
OR
<span ng-bind="phone|tel"></span>
Wenn Sie den Filter in Ihrem Controller verwenden möchten.
var number = '5553219876';
var newNumber = $filter('tel')(number);
Ich habe auch das jQuery-Plugin gefunden, das einfach in Ihre eckige App aufgenommen werden kann (auch mit bower: D) und das alle möglichen Ländercodes mit ihren jeweiligen Masken überprüft :intl-Telefon-Eingang
Sie können dann die verwenden validationScript option, um die Gültigkeit des Eingangswertes zu überprüfen.
Angular-ui hat eine Direktive zum Maskieren von Eingaben.Vielleicht ist es das, was Sie zum Maskieren wollen (leider ist die Dokumentation nicht so toll):
Ich glaube jedoch nicht, dass dies bei der Verschleierung der Kreditkartennummer helfen wird.
Sie können auch überprüfen formatierer der Eingabemaske.
Dies ist eine Richtlinie und sie heißt ui-mask und es ist auch ein Teil von angular-ui.utils Bibliothek.
Hier funktioniert: Live-Beispiel
Zum Zeitpunkt des Schreibens dieses Beitrags gibt es keine Beispiele für die Verwendung dieser Direktive, daher habe ich eine sehr gemacht einfaches Beispiel um zu demonstrieren, wie dieses Ding in der Praxis funktioniert.
Das ist der einfache Weg.Als Basis habe ich es genommen von http://codepen.io/rpdasilva/pen/DpbFf, und einige Änderungen vorgenommen.Für jetzt ist Code einfacher.Und du kannst bekommen:im Controller - "4124561232", im Blick "(412) 456-1232"
Filter:
myApp.filter 'tel', ->
(tel) ->
if !tel
return ''
value = tel.toString().trim().replace(/^\+/, '')
city = undefined
number = undefined
res = null
switch value.length
when 1, 2, 3
city = value
else
city = value.slice(0, 3)
number = value.slice(3)
if number
if number.length > 3
number = number.slice(0, 3) + '-' + number.slice(3, 7)
else
number = number
res = ('(' + city + ') ' + number).trim()
else
res = '(' + city
return res
Und Richtlinie:
myApp.directive 'phoneInput', ($filter, $browser) ->
require: 'ngModel'
scope:
phone: '=ngModel'
link: ($scope, $element, $attrs) ->
$scope.$watch "phone", (newVal, oldVal) ->
value = newVal.toString().replace(/[^0-9]/g, '').slice 0, 10
$scope.phone = value
$element.val $filter('tel')(value, false)
return
return
Versuchen Sie es mit phoneformat.js (http://www.phoneformat.com/), können Sie die Telefonnummer nicht nur basierend auf den Gebietsschemas des Benutzers formatieren (en-US, ja-JP, fr-FR, de-DE usw.), sondern auch die Telefonnummer validieren.Seine sehr robuste Bibliothek basiert auf Googles libphonenumber-Projekt.
Sie können ng-Muster verwenden, das einfacher und leichter ist.http://tutorialzine.com/2014/12/learn-regular-expressions-in-20-minutes/.Hier kannst du davon wissen,,, nur ein paar aussagekräftige Wörter,,, braucht keine Direktive oder Filter,,,,
Ich nahm aberkes Lösung und modifizierte sie nach meinem Geschmack.
- Es erzeugt ein einzelnes Eingabeelement
- Es akzeptiert optional Erweiterungen
- Bei US-Nummern wird der führende Ländercode übersprungen
- Standard-Namenskonventionen
- Verwendet Klasse aus der Verwendung von Code;macht keine Klasse aus
- Ermöglicht die Verwendung aller anderen Attribute, die für ein Eingabeelement zulässig sind
Mein Code-Stift
var myApp = angular.module('myApp', []);
myApp.controller('exampleController',
function exampleController($scope) {
$scope.user = { profile: {HomePhone: '(719) 465-0001 x1234'}};
$scope.homePhonePrompt = "Home Phone";
});
myApp
/*
Intended use:
<phone-number placeholder='prompt' model='someModel.phonenumber' />
Where:
someModel.phonenumber: {String} value which to bind formatted or unformatted phone number
prompt: {String} text to keep in placeholder when no numeric input entered
*/
.directive('phoneNumber',
['$filter',
function ($filter) {
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.inputValue = $filter('phoneNumber')(number, scope.allowExtension);
scope.phoneNumberModel = scope.inputValue;
});
}
return {
link: link,
restrict: 'E',
replace: true,
scope: {
phoneNumberPlaceholder: '@placeholder',
phoneNumberModel: '=model',
allowExtension: '=extension'
},
template: '<input ng-model="inputValue" type="tel" placeholder="{{phoneNumberPlaceholder}}" />'
};
}
]
)
/*
Format phonenumber as: (aaa) ppp-nnnnxeeeee
or as close as possible if phonenumber length is not 10
does not allow country code or extensions > 5 characters long
*/
.filter('phoneNumber',
function() {
return function(number, allowExtension) {
/*
@param {Number | String} number - Number that will be formatted as telephone number
Returns formatted number: (###) ###-#### x #####
if number.length < 4: ###
else if number.length < 7: (###) ###
removes country codes
*/
if (!number) {
return '';
}
number = String(number);
number = number.replace(/[^0-9]+/g, '');
// 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
var c = (number[0] == '1') ? '1 ' : '';
number = number[0] == '1' ? number.slice(1) : number;
// (###) ###-#### as (areaCode) prefix-endxextension
var areaCode = number.substring(0, 3);
var prefix = number.substring(3, 6);
var end = number.substring(6, 10);
var extension = number.substring(10, 15);
if (prefix) {
//formattedNumber = (c + "(" + area + ") " + front);
formattedNumber = ("(" + areaCode + ") " + prefix);
}
if (end) {
formattedNumber += ("-" + end);
}
if (allowExtension && extension) {
formattedNumber += ("x" + extension);
}
return formattedNumber;
};
}
);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="exampleController">
<p>Phone Number Value: {{ user.profile.HomePhone || 'null' }}</p>
<p>Formatted Phone Number: {{ user.profile.HomePhone | phoneNumber }}</p>
<phone-number id="homePhone"
class="form-control"
placeholder="Home Phone"
model="user.profile.HomePhone"
ng-required="!(user.profile.HomePhone.length || user.profile.BusinessPhone.length || user.profile.MobilePhone.length)" />
</div>Ich habe den Code geändert, um das Telefon in diesem Formatwert auszugeben: +38 (095) 411-22-23 Hier können Sie es überprüfen linkbeschreibung hier eingeben
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.currencyVal;
});
myApp.directive('phoneInput', function($filter, $browser) {
return {
require: 'ngModel',
link: function($scope, $element, $attrs, ngModelCtrl) {
var listener = function() {
var value = $element.val().replace(/[^0-9]/g, '');
$element.val($filter('tel')(value, false));
};
// This runs when we update the text field
ngModelCtrl.$parsers.push(function(viewValue) {
return viewValue.replace(/[^0-9]/g, '').slice(0,12);
});
// This runs when the model gets updated on the scope directly and keeps our view in sync
ngModelCtrl.$render = function() {
$element.val($filter('tel')(ngModelCtrl.$viewValue, false));
};
$element.bind('change', listener);
$element.bind('keydown', function(event) {
var key = event.keyCode;
// If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
// This lets us support copy and paste too
if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)){
return;
}
$browser.defer(listener); // Have to do this or changes don't get picked up properly
});
$element.bind('paste cut', function() {
$browser.defer(listener);
});
}
};
});
myApp.filter('tel', function () {
return function (tel) {
console.log(tel);
if (!tel) { return ''; }
var value = tel.toString().trim().replace(/^\+/, '');
if (value.match(/[^0-9]/)) {
return tel;
}
var country, city, num1, num2, num3;
switch (value.length) {
case 1:
case 2:
case 3:
city = value;
break;
default:
country = value.slice(0, 2);
city = value.slice(2, 5);
num1 = value.slice(5,8);
num2 = value.slice(8,10);
num3 = value.slice(10,12);
}
if(country && city && num1 && num2 && num3){
return ("+" + country+" (" + city + ") " + num1 +"-" + num2 + "-" + num3).trim();
}
else if(country && city && num1 && num2) {
return ("+" + country+" (" + city + ") " + num1 +"-" + num2).trim();
}else if(country && city && num1) {
return ("+" + country+" (" + city + ") " + num1).trim();
}else if(country && city) {
return ("+" + country+" (" + city ).trim();
}else if(country ) {
return ("+" + country).trim();
}
};
});
Sie müssen benutzerdefinierte Formularsteuerelemente (als Anweisungen) für die Telefonnummer und die Kreditkarte erstellen.Siehe Abschnitt "Implementieren der benutzerdefinierten Formularsteuerung (mit ngModel )" auf der Forms Seite.
Wie Narretz bereits erwähnte, sind Angular-UI's Maskenrichtlinie sollte Ihnen den Einstieg erleichtern.
Einfacher Filter in etwa so (verwenden Sie die numerische Klasse am Eingabeende Filterzeichen in []):
<script type="text/javascript">
// Only allow number input
$('.numeric').keyup(function () {
this.value = this.value.replace(/[^0-9+-\.\,\;\:\s()]/g, ''); // this is filter for telefon number !!!
});
So habe ich die ssn-Direktive erstellt, die nach dem Muster sucht, und ich habe RobinHerbots verwendet jquery.inputmask
angular.module('SocialSecurityNumberDirective', [])
.directive('socialSecurityNumber', socialSecurityNumber);
function socialSecurityNumber() {
var jquery = require('jquery');
var inputmask = require("jquery.inputmask");
return {
require: 'ngModel',
restrict: 'A',
priority: 1000,
link: function(scope,element, attr, ctrl) {
var jquery_element = jquery(element);
jquery_element.inputmask({mask:"***-**-****",autoUnmask:true});
jquery_element.on('keyup paste focus blur', function() {
var val = element.val();
ctrl.$setViewValue(val);
ctrl.$render();
});
var pattern = /^\d{9}$/;
var newValue = null;
ctrl.$validators.ssnDigits = function(value) {
newValue = element.val();
return newValue === '' ? true : pattern.test(newValue);
};
}
};
}
Ich habe dieses Problem auch mit einem benutzerdefinierten Winkelfilter gelöst, aber meiner nutzt die Vorteile von Regex-Erfassungsgruppen und daher ist der Code sehr kurz.Ich kombiniere es mit einem separaten stripNonNumeric filter zum Bereinigen der Eingabe:
app.filter('stripNonNumeric', function() {
return function(input) {
return (input == null) ? null : input.toString().replace(/\D/g, '');
}
});
Der phoneFormat der Filter formatiert eine Telefonnummer mit oder ohne Ortsvorwahl ordnungsgemäß.(Ich brauchte keine internationale Nummernunterstützung.)
app.filter('phoneFormat', function() {
//this establishes 3 capture groups: the first has 3 digits, the second has 3 digits, the third has 4 digits. Strings which are not 7 or 10 digits numeric will fail.
var phoneFormat = /^(\d{3})?(\d{3})(\d{4})$/;
return function(input) {
var parsed = phoneFormat.exec(input);
//if input isn't either 7 or 10 characters numeric, just return input
return (!parsed) ? input : ((parsed[1]) ? '(' + parsed[1] + ') ' : '') + parsed[2] + '-' + parsed[3];
}
});
Benutze sie einfach:
<p>{{customer.phone | stripNonNumeric | phoneFormat}}</p>
Der reguläre Ausdruck für die stripNonNumeric filter kam von hier.
Finden Plunker zum Formatieren von Kreditkartennummern verwenden der Angularjs-Direktive.Formatieren Sie Kartennummern in xxxxxxxxxxxxx3456 Vonat.
angular.module('myApp', [])
.directive('maskInput', function() {
return {
require: "ngModel",
restrict: "AE",
scope: {
ngModel: '=',
},
link: function(scope, elem, attrs) {
var orig = scope.ngModel;
var edited = orig;
scope.ngModel = edited.slice(4).replace(/\d/g, 'x') + edited.slice(-4);
elem.bind("blur", function() {
var temp;
orig = elem.val();
temp = elem.val();
elem.val(temp.slice(4).replace(/\d/g, 'x') + temp.slice(-4));
});
elem.bind("focus", function() {
elem.val(orig);
});
}
};
})
.controller('myCtrl', ['$scope', '$interval', function($scope, $interval) {
$scope.creditCardNumber = "1234567890123456";
}]);
Fügen Sie das 'xeditable' -Modul in Ihre Angular-App ein (frei verfügbar):
var App = angular.module('App', ['xeditable']);
Verwenden Sie dann die integrierte Funktion in Ihrem HTML-Code wie folgt:
<div>{{ value|number:2 }}</div>
