javascript - form - directiva angular ignorar entrada no numérica

plunker angularjs editor

Question

Tengo que escribir algún código para IE8. Tengo una repetición ng creando una tabla llena de:

<input production-qty type="text" class="input-mini" maxlength="3" ng-model="day.qtyA" ui-event="{ blur : ''updateProduction(day)'' }" ng-disabled="day.type==''H''">

IE8 no hará type = número

Quiero una directiva que ignore los golpes de tecla en ese campo de entrada que NO sean teclas numéricas ... es decir, ... 0 - 9

No quiero permitir que el usuario escriba abc y contamine el modelo y luego les diga que el valor no es válido. Prefiero no permitir que ingresen ningún dato que no sea válido en primer lugar.

Answer 1

HTML:

<input production-qty type="text" maxlength="3" ng-model="qty1">

Directiva:

app.directive(''productionQty'', function() {
return {
require: ''ngModel'',
link: function (scope, element, attr, ngModelCtrl) {
function fromUser(text) {
var transformedInput = text.replace(/[^0-9]/g, '''');
console.log(transformedInput);
if(transformedInput !== text) {
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
}
return transformedInput; // or return Number(transformedInput)
}
ngModelCtrl.$parsers.push(fromUser);
}
};
});

Plunker

Ver también filtros en ng-model en una entrada . Mi respuesta anterior se basa en la respuesta de pkozlowski.opensource.

Miré el patrón ng, pero no filtra lo que se muestra en el cuadro de texto. Establece $scope.qty1 en undefined , pero los caracteres no deseados son visibles en el cuadro de texto.

Answer 2

HTML:

<input type="number" name="graduationYear" ng-model="gradYear" only-num>

Directiva:

directive(''onlyNum'', function() {
return function(scope, element, attrs) {
var keyCode = [8, 9, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110];
element.bind("keydown", function(event) {
//console.log($.inArray(event.which,keyCode));
if ($.inArray(event.which, keyCode) === -1) {
scope.$apply(function() {
scope.$eval(attrs.onlyNum);
event.preventDefault();
});
event.preventDefault();
}
});
};
});

Answer 3

No es directiva pero uso solo:

controlador:

 $scope.blockNonNumber = function (val, field){
$scope[field] = val.toString().replace(/[^0-9]/g, '''');
}

html:

<input type="text" ng-model="price" ng-change="blockNonNumber(price, ''price'')" pattern="[0-99]">

No es una directiva, pero se puede usar tanto en directivas como en laterales.

Answer 4

Primero incluya este código en el archivo numericInput.js

Directiva: -

.directive(''numeric'', function() {
return function(scope, element, attrs) {
$(element[0]).numericInput({ allowFloat: true });
};
})

HTML: -

 <input type="text" numeric />

DEMO Demostración Numérica