I have to write some code for IE8. I have an ng-repeat creating a table filled with:
<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 won't do type=number
I want a directive that will ignore key strokes on that input field that are NOT numeric keys....ie....0 - 9
I don't want to let the user type abc and pollute the model and then tell them the value is invalid. I'd rather not let them enter any data that's not valid in the first place.
HTML:
<input production-qty type="text" maxlength="3" ng-model="qty1">
Directive:
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);
}
};
});
See also angularjs filters on ng-model in an input. My answer above is modeled off pkozlowski.opensource's answer.
I looked at ng-pattern, but it does not filter what is shown in the textbox. It sets $scope.qty1 to undefined, but the undesired characters are visible in the textbox.
HTML:
<input type="number" name="graduationYear" ng-model="gradYear" only-num>
Directive:
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();
}
});
};
});
First include this code in js file numericInput.js
Directive : -
.directive('numeric', function() {
return function(scope, element, attrs) {
$(element[0]).numericInput({ allowFloat: true });
};
})
HTML : -
<input type="text" numeric />
DEMO Numeric Demo
not directive but I use just:
controller:
$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]">
it's not directive but can be used in directive as wellside