Eu escrevi uma diretiva para inibir a digitação a partir da especificação de uma regex. No entanto há dois bugs nessa solução:
- No primeiro exemplo o input deve permitir somente números ou números seguidos de ponto [.], ou números seguidos de ponto seguido de números com não mais que 4 dígitos.
- Se eu digito '1.1111' e vou para o início do campo e digito outro digito (com o objetivo de ter o valor '11.1111') , nada acontece. Este bug ocorre devido ao fato de eu usar a expressão
elem.val() + event.key
no meu validador (utilizei pois não sei como recuperar o valor corrente do input);
- Se eu digito '1.1111' e vou para o início do campo e digito outro digito (com o objetivo de ter o valor '11.1111') , nada acontece. Este bug ocorre devido ao fato de eu usar a expressão
- O segundo é o fato de alguns caracteres (crase, agudo, til, circumflexo) estarem sendo permitidos (pressione qualquer um deles mais de uma vez no campo), embora a regex não os permita.
Quais mudanças eu tenho que fazer no meu código para ter uma restrição efetiva a partir de regex?
<html ng-app="app">
<head>
<script data-require="angularjs@1.6.4" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Restrict typing by RegExp</h1>
PATTERN 1 (^\d+$|^\d+[.]$|^\d+[.]\d{1,4}$) <input type="text" allow-typing="^\d+$|^\d+[.]$|^\d+[.]\d{1,4}$"/><br>
ONLY NUMBERS <input type="text" allow-typing="^[0-9]+$"/><br>
ONLY STRINGS <input type="text" allow-typing="^[a-zA-Z]+$"/>
</body>
</html>
Directive
angular.module('app', []).directive('allowTyping', function() {
return {
restrict: 'A',
link: function(scope, elem, attrs, ctrl) {
var regex = attrs.allowTyping;
elem.bind('keypress', function(event) {
var input = elem.val() + event.key;
var validator = new RegExp(regex);
if(!validator.test(input)) {
event.preventDefault();
return false;
}
});
}
};
});
Ctrl+C
eCtrl+V
. Após inserir estes caracteres com copiar e colar, a caixa de input trava e não é possível inserir mais caracteres.