javascript - ejemplo - ng-init

angularjs: permite que solo se escriban los números en un cuadro de texto

Question

En angularjs hay alguna funcionalidad disponible que permite que solo se escriban los números en un cuadro de texto like

Answer 1

Acabo de usar ng-keypress en la directiva para mi entrada.

HTML:

<input type="text" ng-keypress="filterValue($event)"/>

JS:

$scope.filterValue = function($event){
        if(isNaN(String.fromCharCode($event.keyCode))){
            $event.preventDefault();
        }
};

Answer 2

Arreglé el jQuery en this

.directive(''numbersCommaOnly'', function(){
   return {
     require: ''ngModel'',
     link: function (scope, element, attrs, ngModel) {

        element.on(''keydown'', function(event) {                  
            // Allow: backspace, delete, tab, escape, enter and .
            var array2 = [46, 8, 9, 27, 13, 110, 190]
            if (array2.indexOf(event.which) !== -1 ||
                 // Allow: Ctrl+A
                (event.which == 65 && event.ctrlKey === true) ||
                 // Allow: Ctrl+C
                (event.which == 67 && event.ctrlKey === true) ||
                 // Allow: Ctrl+X
                (event.which == 88 && event.ctrlKey === true) ||
                 // Allow: home, end, left, right
                (event.which >= 35 && event.which <= 39)) {
                     // let it happen, don''t do anything
                     return;
            }
            // Ensure that it is a number and stop the keypress
            if ((event.shiftKey || (event.which < 48 || event.which > 57)) && (event.which < 96 || event.which > 105)) {
                event.preventDefault();
            }
         });

     }
   };
})

Answer 3

Basado en la solución djsiz , envuelto en una directiva. NOTA: no manejará números de dígitos, pero se puede actualizar fácilmente

angular
        .module("app")
        .directive("mwInputRestrict", [
            function () {
                return {
                    restrict: "A",
                    link: function (scope, element, attrs) {
                        element.on("keypress", function (event) {
                            if (attrs.mwInputRestrict === "onlynumbers") {
                                // allow only digits to be entered, or backspace and delete keys to be pressed
                                return (event.charCode >= 48 && event.charCode <= 57) ||
                                       (event.keyCode === 8 || event.keyCode === 46);
                            }
                            return true;
                        });
                    }
                }
            }
        ]);

HTML

 <input type="text"
        class="form-control"
        id="inputHeight"
        name="inputHeight"
        placeholder="Height"
        mw-input-restrict="onlynumbers"
        ng-model="ctbtVm.dto.height">

Answer 4

Es simple y comprensible. Solo copie y pegue este código, y su problema se resolverá. Para obtener más condiciones simplemente cambie el valor en el patrón. Y su trabajo lo hará.

<input type="text"  pattern="[0-9]{0,}" oninvalid="this.setCustomValidity(''Please enter only numeric value. Special character are not allowed.'')" oninput="setCustomValidity('''')">

Answer 5

Esta es la forma más simple y rápida, para permitir solo la entrada de Número.

<input type="text" id="cardno" placeholder="Enter a Number" onkeypress=''return event.charCode >= 48 && event.charCode <= 57'' required>

Gracias

Answer 6

Esta funcionalidad es exactamente lo que necesitas. http://docs.angularjs.org/api/ng.directive:input.number

EDITAR:

Puede ajustar el plugin jquery en la directiva. Creé un ejemplo aquí: http://jsfiddle.net/anazimok/jTJCF/

HTML:

<div ng-app="myApp">
    <div>
        <input type="text" min="0" max="99" number-mask="" ng-model="message">
            <button ng-click="handleClick()">Broadcast</button>
    </div>

</div>

CSS:

.ng-invalid {
    border: 1px solid red;
}

JS:

// declare a module
var app = angular.module(''myApp'', []);

app.directive(''numberMask'', function() {
    return {
        restrict: ''A'',
        link: function(scope, element, attrs) {
            $(element).numeric();
        }
    }
});

Answer 7

Esta solución solo aceptará números, ''.'' y ''-''

También esto restringe la entrada de espacio en el cuadro de texto. Yo había usado la directiva para lograr lo mismo.

Tenga la solución en el siguiente ejemplo de trabajo.

http://jsfiddle.net/vfsHX/2697/

HTML:

<form ng-app="myapp" name="myform" novalidate> 
<div ng-controller="Ctrl">
<input name="number" is-number ng-model="wks.number">
<span ng-show="!wks.validity">Value is invalid</span>
</div>

JS:

var $scope;
var app = angular.module(''myapp'', []);

app.controller(''Ctrl'', function($scope) {
    $scope.wks =  {number: 1, validity: true}
});

app.directive(''isNumber'', function () {
    return {
        require: ''ngModel'',
        link: function (scope, element, attrs, ngModel) {   
        element.bind("keydown keypress", function (event) {
          if(event.which === 32) {
            event.returnValue = false;
            return false;
          }
       }); 
            scope.$watch(attrs.ngModel, function(newValue,oldValue) {
                var arr = String(newValue).split("");
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] == ''-'' || arr[0] === ''.'' )) return;
                if (arr.length === 2 && newValue === ''-.'') return;
                if (isNaN(newValue)) {
                    //scope.wks.number = oldValue;
                    ngModel.$setViewValue(oldValue);
                                    ngModel.$render();
                }
            });

        }
    };
});

Answer 8

Este código muestra el ejemplo de cómo evitar el ingreso de símbolos que no sean dígitos.

angular.module(''app'').
  directive(''onlyDigits'', function () {

    return {
        restrict: ''A'',
        require: ''?ngModel'',
        link: function (scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (inputValue) {
                if (inputValue == undefined) return '''';
                var transformedInput = inputValue.replace(/[^0-9]/g, '''');
                if (transformedInput !== inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }
                return transformedInput;
            });
        }
    };
});

Answer 9

Este es el método que funciona para mí. Se basa en samnau awser pero permite enviar el formulario con ENTER , aumentar y disminuir el número con las flechas UP y DOWN , edición con DEL , BACKSPACE , LEFT y RIGHT , y navegar a través de los campos con TAB . Tenga en cuenta que funciona para enteros positivos como una cantidad.

HTML:

<input ng-keypress="onlyNumbers($event)" min="0" type="number" step="1" ng-pattern="/^[0-9]{1,8}$/" ng-model="... >

ANGULARJS:

$scope.onlyNumbers = function(event){   
    var keys={
        ''up'': 38,''right'':39,''down'':40,''left'':37,
        ''escape'':27,''backspace'':8,''tab'':9,''enter'':13,''del'':46,
        ''0'':48,''1'':49,''2'':50,''3'':51,''4'':52,''5'':53,''6'':54,''7'':55,''8'':56,''9'':57
    };
    for(var index in keys) {
        if (!keys.hasOwnProperty(index)) continue;
        if (event.charCode==keys[index]||event.keyCode==keys[index]) {
            return; //default event
        }
    }   
    event.preventDefault();
};

Answer 10

HTML

 <input type="text" name="number" only-digits>

// Simplemente escribe 123

  .directive(''onlyDigits'', function () {
    return {
      require: ''ngModel'',
      restrict: ''A'',
      link: function (scope, element, attr, ctrl) {
        function inputValue(val) {
          if (val) {
            var digits = val.replace(/[^0-9]/g, '''');

            if (digits !== val) {
              ctrl.$setViewValue(digits);
              ctrl.$render();
            }
            return parseInt(digits,10);
          }
          return undefined;
        }            
        ctrl.$parsers.push(inputValue);
      }
    };
});

// tipo: 123 o 123.45

 .directive(''onlyDigits'', function () {
    return {
      require: ''ngModel'',
      restrict: ''A'',
      link: function (scope, element, attr, ctrl) {
        function inputValue(val) {
          if (val) {
            var digits = val.replace(/[^0-9.]/g, '''');

            if (digits.split(''.'').length > 2) {
              digits = digits.substring(0, digits.length - 1);
            }

            if (digits !== val) {
              ctrl.$setViewValue(digits);
              ctrl.$render();
            }
            return parseFloat(digits);
          }
          return undefined;
        }            
        ctrl.$parsers.push(inputValue);
      }
    };
 });

Answer 11

Lo he hecho en

.js

$scope.numberOnly="(^[0-9]+$)";

.html

<input type="text" name="rollNo" ng-model="stud.rollNo" ng-pattern="numberOnly" ng-maxlength="10" maxlength="10" md-maxlength="10" ng-required="true" >

Answer 12

Mi solución acepta Copiar y pegar y guardar la posición del cursor. Se utiliza para el costo de productos, por lo que solo permite valores decimales positivos. Puede ser refactorizador muy fácil de permitir dígitos negativos o solo enteros.

angular
        .module("client")
        .directive("onlyNumber", function () {
            return {
                restrict: "A",
                link: function (scope, element, attr) {
                    element.bind(''input'', function () {
                        var position = this.selectionStart - 1;

                        //remove all but number and .
                        var fixed = this.value.replace(/[^0-9/.]/g, '''');  
                        if (fixed.charAt(0) === ''.'')                  //can''t start with .
                            fixed = fixed.slice(1);

                        var pos = fixed.indexOf(".") + 1;
                        if (pos >= 0)               //avoid more than one .
                            fixed = fixed.substr(0, pos) + fixed.slice(pos).replace(''.'', '''');  

                        if (this.value !== fixed) {
                            this.value = fixed;
                            this.selectionStart = position;
                            this.selectionEnd = position;
                        }
                    });
                }
            };
        });

Ponga en la página html:

<input type="text" class="form-control" only-number ng-model="vm.cost" />

Answer 13

Para construir sobre la respuesta de Anton un poco -

angular.module("app").directive("onlyDigits", function ()
{
    return {
        restrict: ''EA'',
        require: ''?ngModel'',
        scope:{
            allowDecimal: ''@'',
            allowNegative: ''@'',
            minNum: ''@'',
            maxNum: ''@''
        },

        link: function (scope, element, attrs, ngModel)
        {
            if (!ngModel) return;
            ngModel.$parsers.unshift(function (inputValue)
            {
                var decimalFound = false;
                var digits = inputValue.split('''').filter(function (s,i)
                {
                    var b = (!isNaN(s) && s != '' '');
                    if (!b && attrs.allowDecimal && attrs.allowDecimal == "true")
                    {
                        if (s == "." && decimalFound == false)
                        {
                            decimalFound = true;
                            b = true;
                        }
                    }
                    if (!b && attrs.allowNegative && attrs.allowNegative == "true")
                    {
                        b = (s == ''-'' && i == 0);
                    }

                    return b;
                }).join('''');
                if (attrs.maxNum && !isNaN(attrs.maxNum) && parseFloat(digits) > parseFloat(attrs.maxNum))
                {
                    digits = attrs.maxNum;
                }
                if (attrs.minNum && !isNaN(attrs.minNum) && parseFloat(digits) < parseFloat(attrs.minNum))
                {
                    digits = attrs.minNum;
                }
                ngModel.$viewValue = digits;
                ngModel.$render();

                return digits;
            });
        }
    };
});

Answer 14

Podría hacer algo como esto: Use ng-pattern con RegExp " / ^ [0-9] + $ / ", lo que significa que solo los números enteros son válidos.

<form novalidate name="form">
    <input type="text" data-ng-model="age" id="age" name="age" ng-pattern="/^[0-9]+$/">
    <span ng-show="form.age.$error.pattern">The value is not a valid integer</span>
</form>

Answer 15

Puede consultar https://github.com/rajesh38/ng-only-number

1. Restringe la entrada a solo números y puntos decimales en un cuadro de texto mientras se escribe.
2. Puede limitar la cantidad de dígitos permitidos antes y después del punto decimal
3. También recorta los dígitos después del punto decimal si el punto decimal se elimina del cuadro de texto. Por ejemplo, si ha puesto 123.45 y luego elimina el punto decimal, también eliminará los dígitos posteriores después del punto decimal y lo convertirá en 123.

Answer 16

Sé que esta es una publicación anterior, pero esta adaptación de la respuesta de My Mai funciona muy bien para mí ...

angular.module("app").directive("numbersOnly", function() {
  return {
    require: "ngModel",
    restrict: "A",
    link: function(scope, element, attr, ctrl) {
        function inputValue(val) {
            if (val) {
                //transform val to a string so replace works
                var myVal = val.toString();

                //replace any non numeric characters with nothing
                var digits = myVal.replace(//D/g, "");

                //if anything needs replacing - do it!
                if (digits !== myVal) {
                    ctrl.$setViewValue(digits);
                    ctrl.$render();
                }
                return parseFloat(digits);
            }
            return undefined;
        }
        ctrl.$parsers.push(inputValue);
    }
  };
});

Answer 17

Simplemente use HTML5

<input type="number" min="0"/>

Answer 18

Tuve un problema similar y terminé enganchado y evento

ng-change="changeCount()" 

entonces:

self.changeCount = function () {
      if (!self.info.itemcount) {
        self.info.itemcount = 1;
      }
 };

Por lo tanto, el usuario tiene un valor predeterminado de 1 si se inserta un número inválido.

Answer 19

Use ng-only-number para permitir solo números, por ejemplo:

<input type="text" ng-only-number data-max-length=5>

Answer 20

 <input
    onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||                         
    event.charCode == 0 || event.charCode == 46">

Answer 21

 <input type="text" ng-keypress="checkNumeric($event)"/>
 //inside controller
 $scope.dot = false
 $scope.checkNumeric = function($event){
 if(String.fromCharCode($event.keyCode) == "." && !$scope.dot){
    $scope.dot = true
 }
 else if( isNaN(String.fromCharCode($event.keyCode))){
   $event.preventDefault();
 }