Como usar a ui-mask angular para mascarar um número de telefone com extensão opcional?
(999) 999-9999 ext. 999 vai fazer a extensão necessária.
4 answers
A solução para a sua máscara seria:
(999) 999-9999 ext. ?9?9?9
Os pontos de interrogação na sua máscara marcarão o próximo carácter como opcional. Acredita, funciona.
Desculpa ter demorado tanto a responder.(999) 999-9999 ext. ?9?9?9
<input type='text'
ng-model='customer.phone'
ui-mask="{{phoneMask}}"
ng-blur="removeMask()"
ng-focus="placeMask()" />
E no meu controlador:
$scope.phoneMask= "(999) 999-9999 ext. ?9?9?9";
$scope.removeMask = function () {
if ($scope.rep.phone.length === 10) {
$scope.phoneMask= "(999) 999-9999";
}
};
$scope.placeMask = function () {
$scope.phoneMask= "(999) 999-9999 ext. ?9?9?9";
}
Acabei por usar jquery.inputmask (http://github.com/RobinHerbots/jquery.inputmask).
Em primeiro lugar, é claro é para NuGet ou descarrega a biblioteca. A versão atual (3.0.55) separa funções em diferentes arquivos js. (data, numérico, telefone...) Certifique-se de incluir tudo o que você precisa.
Criar uma directiva para o atributo ou classe da máscara de entrada. Utilizar
linkna presente directiva para utilizar a jQuery para aplicar a máscara de entrada:
Aqui está o código:
(function(){
'use strict';
var directiveId = 'myInputMask';
angular.module('myApp')..directive(directiveId, function() {
return {
restrict: 'AC',
link: function (scope, el, attrs) {
el.inputmask(scope.$eval(attrs.myInputMask));
el.on('change', function() {
scope.$eval(attrs.ngModel + "='" + el.val() + "'");
// or scope[attrs.ngModel] = el.val() if your expression doesn't contain dot.
});
}
}
});
})();
- finalmente, aplique esta diretiva no atributo ou classe em nosso Html.
Aqui está o Html:
<input type="text" id="phone"
my-input-mask="{mask: '(999)999-9999[ ext. 9999]', greedy: false}"
required="" ng-model="employee.phone">
Claro., com jquery.inputmask, Podemos ter uma máscara de entrada muito mais complexa:
<input type="text" id="salary"
dnr-input-mask="{'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': true, 'placeholder': '0'}"
model="employee.salary">
Uma boa solução para este problema é usar ngMask que lhe permite fazer exactamente o que quiser sem jQuery. Para fazer isso apenas adicionar um "an"?'depois do carácter que deseja ser opcional:
mask="9?9999-9999