JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<div ng-controller="fessCntrl">Example
<input type="text" ng-model="test" format="number" /> <pre>{{test|json}}</pre>
</div>
JavaScript
var fessmodule = angular.module('myModule', []);
fessmodule.controller('fessCntrl', function($scope) {
$scope.test = 123456879;
});
fessmodule.$inject = ['$scope'];
fessmodule.directive('format', ['$filter', '$window', function($filter, $window) {
return {
require: '?ngModel',
link: function(scope, elem, attrs, ctrl) {
if (!ctrl) return;
scope.vKey = 86;
scope.ctrlVDown = false;
angular.element($window).bind("keydown", function($event) {
console.log($event.keyCode);
if ($event.keyCode == scope.vKey) {
scope.ctrlVDown = true;
} else {
scope.ctrlVDown = false;
}
});
ctrl.$parsers.unshift(function(viewValue) {
var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
console.log(scope.ctrlVDown);
if (scope.ctrlVDown && plainNumber.length !== viewValue.length) {
elem.val('');
return '';
} else {
elem.val(plainNumber);
return plainNumber;
}
});
}
};
}]);