Como posso restringir uma entrada para aceitar apenas números?


92

Estou usando o ngChange no AngularJS para acionar uma função personalizada que removerá todas as letras que o usuário adicionar à entrada.

<input type="text" name="inputName" data-ng-change="numbersOnly()"/>

O problema é que preciso direcionar a entrada que foi acionada numbersOnly()para poder remover as letras inseridas. Procurei muito no Google e não consegui encontrar nada sobre isso.

O que eu posso fazer?


Esta também é uma boa solução, que não permite inserir letras.
Himanshu Bhandari,

Respostas:


104

Maneira fácil , use type = "number" se funcionar para seu caso de uso:

<input type="number" ng-model="myText" name="inputName">

Outra maneira fácil: o ng-pattern também pode ser usado para definir uma regex que limitará o que é permitido no campo. Veja também a página do "livro de receitas" sobre formulários .

Hackish? forma , $ observe o ng-model em seu controlador:

<input type="text"  ng-model="myText" name="inputName">

Controlador:

$scope.$watch('myText', function() {
   // put numbersOnly() logic here, e.g.:
   if ($scope.myText  ... regex to look for ... ) {
      // strip out the non-numbers
   }
})

Melhor maneira , use um analisador $ em uma diretiva. Não vou repetir a já boa resposta fornecida por @ pkozlowski.opensource, então aqui está o link: https://stackoverflow.com/a/14425022/215945

Todas as soluções acima envolvem o uso do modelo ng, o que torna thisdesnecessário encontrar .

Usar o ng-change causará problemas. Consulte AngularJS - redefinição de $ scope.value não altera o valor no modelo (comportamento aleatório)


Acabou criando uma diretriz! Obrigado por incluir a melhor maneira. Levei um pouco de pesquisa, mas aprendi muito!
Chris Bier

1
Alguém capaz de expandir as desvantagens para a maneira "fácil" listada primeiro (type = "número"), particularmente em comparação com a maneira "melhor" recomendada ($ parser na diretiva)?
Matt Welch

2
@MattWelch, resposta tardia, mas a desvantagem é o suporte ao navegador. Também no Chrome, pelo menos, type=numberexibirá automaticamente o botão giratório, o que pode ser indesejável. Você pode ocultar o botão giratório via css, mas, novamente, mesmo isso pode não funcionar em todos os navegadores.
Rosdi Kasim

3
Apenas duas coisas que podem ser problemáticas com a abordagem "fácil" (tipo = "número") é que 1. tipo = "número" permite sinal negativo (-), separador decimal (./,) e notação exponencial (e) e 2. em dispositivos móveis Samsung, você não pode inserir um número negativo em um campo type = "número" (simplesmente não há tecla de menos no teclado)
Aides

maneira fácil ... o firefox permite que os caracteres sejam inseridos em um campo apenas numérico. Não atualiza o modelo, mas exibe os personagens
DRaehal

66

Usando ng-patternno campo de texto:

<input type="text"  ng-model="myText" name="inputName" ng-pattern="onlyNumbers">

Em seguida, inclua isso em seu controlador

$scope.onlyNumbers = /^\d+$/;

Isso é o que acabei fazendo com base na resposta de Marcos, mas obrigado pelos exemplos! Tenho certeza que vai ajudar alguém!
Chris Bier

2
isso funciona quase perfeitamente, mas ainda permite que 'e' seja inserido.
cookies de

Realmente ajuda se você estiver lutando com a limitação de type = "number" e seu comprimento. A solução é usar este padrão ng e reverter para type = "text". Solução muito arrumada e remove uma carga de verificação de código para ng-change ou ng-keypress. Esta solução não permitiu que 'e's fossem inseridos, portanto, presumo que seja outro problema.
PeterS

1
Parece-me ser específico do navegador quanto a não permitir nenhuma entrada numérica ou não. No Chrome, simplesmente usar <input type = 'number' /> é suficiente e não permite nenhuma entrada numérica, o Firefox, por outro lado, com o mesmo Html, permite qualquer entrada, mas aciona o sinalizador de entrada inválido se o valor não for numérico. Estou procurando uma maneira simples de obter o comportamento do Chrome em todos os navegadores
steve

19

Nenhuma das soluções propostas funcionou bem para mim e, depois de algumas horas, finalmente encontrei o caminho.

Esta é a diretiva angular:

angular.module('app').directive('restrictTo', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var re = RegExp(attrs.restrictTo);
            var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/;

            element[0].addEventListener('keydown', function(event) {
                if (!exclude.test(event.key) && !re.test(event.key)) {
                    event.preventDefault();
                }
            });
        }
    }
});

E a entrada ficaria assim:

<input type="number" min="0" name="inputName" ng-model="myModel" restrict-to="[0-9]">

A expressão regular avalia a tecla pressionada, não o valor .

Também funciona perfeitamente com entradas type="number"porque evita a alteração de seu valor, por isso a chave nunca é exibida e não atrapalha o modelo.


Para permitir negativos,restrict-to="[0-9\-]"
Noumenon

18

Aqui está minha implementação da $parsersolução que @Mark Rajcok recomenda como o melhor método. É essencialmente o excelente $ parser do @ pkozlowski.opensource para respostas de texto, mas reescrito para permitir apenas números. Todo o crédito vai para ele, isso é apenas para economizar 5 minutos lendo essa resposta e, em seguida, reescrevendo a sua própria:

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

            modelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null;

                if (transformedInput!=inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }

                return transformedInput;
            });
        }
    };
});

E você o usaria assim:

<input type="text" name="number" ng-model="num_things" numeric-only>

Curiosamente, os espaços nunca chegam ao analisador, a menos que estejam cercados por um alfanumérico, então você terá que fazê-lo .trim()conforme necessário. Além disso, este analisador NÃO funciona <input type="number">. Por alguma razão, não-numéricos nunca fazê-lo para o analisador, onde eles seriam removidos, mas eles fazem fazê-lo no próprio controle de entrada.


Quando implementei isso, obtive erros de JS se o modelo de entrada foi inicializado sem um valor. Fazer essa alteração resolveu que: var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null;
Alkie

Obrigado @Alkie. Eu adicionei essa mudança na diretiva.
Mordred de

1
Você deve definir ng-trimcomo falsepara garantir que os espaços cheguem ao seu analisador.
Ilya

Para torná-lo perfeito, você precisa adicionar modelCtrl.$commitViewValue();entre $ setViewValue (clean); e $ render ();
ingaham,

1
Obrigado! Isso é simplesmente incrível! Ajudou muito
iulial

4

Há algumas maneiras de fazer isto.

Você pode usar type="number":

<input type="number" />

Como alternativa - criei uma diretiva reutilizável para isso que usa uma expressão regular.

Html

<div ng-app="myawesomeapp">
    test: <input restrict-input="^[0-9-]*$" maxlength="20" type="text" class="test" />
</div>

Javascript

;(function(){
    var app = angular.module('myawesomeapp',[])
    .directive('restrictInput', [function(){

        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var ele = element[0];
                var regex = RegExp(attrs.restrictInput);
                var value = ele.value;

                ele.addEventListener('keyup',function(e){
                    if (regex.test(ele.value)){
                        value = ele.value;
                    }else{
                        ele.value = value;
                    }
                });
            }
        };
    }]);    
}());

use, $ (elemento) .on ('entrada', função () {// sua lógica}); isso impedirá até mesmo inserir o valor indesejado
Vishal

4

Aqui está uma solução muito boa para permitir apenas inserir o número para input:

<input type="text" ng-model="myText" name="inputName" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>

isso não me permite pressionar delete ou backspace
Ravistm

delete e backspace funcionam embora. Testado no Firefox 76.0.1
iamjoshua

3

Todas as soluções acima são bastante grandes, eu queria dar meus 2 centavos nisso.

Estou apenas verificando se o valor inserido é um número ou não, e verificando se não está em branco, só isso.

Aqui está o html:

<input type="text" ng-keypress="CheckNumber()"/>

Aqui está o JS:

$scope.CheckKey = function () {
    if (isNaN(event.key) || event.key === ' ' || event.key === '') {
        event.returnValue = '';
    }
};

É bem simples.

Eu acredito que isso não funcionará no Paste tho, apenas para que seja conhecido.

Para Paste, acho que você precisaria usar o evento onChange e analisar a string inteira, outra besta, o tamme. Isso é específico para digitação.

ATUALIZAÇÃO para colar : basta adicionar esta função JS:

$scope.CheckPaste = function () {
    var paste = event.clipboardData.getData('text');

    if (isNaN(paste)) {
        event.preventDefault();
        return false;
    }
};

E a entrada html adiciona o gatilho:

<input type="text" ng-paste="CheckPaste()"/>

Espero que isso ajude o /


2

Aqui está um Plunker lidando com qualquer situação acima, a proposição não pode ser tratada .
Usando $ formatters e $ parsers pipeline e evitando type = "number"

E aqui está a explicação dos problemas / soluções (também disponíveis no Plunker):

/*
 *
 * Limit input text for floating numbers.
 * It does not display characters and can limit the Float value to X numbers of integers and X numbers of decimals.
 * min and max attributes can be added. They can be Integers as well as Floating values.
 *
 * value needed    |    directive
 * ------------------------------------
 * 55              |    max-integer="2"
 * 55.55           |    max-integer="4" decimal="2" (decimals are substracted from total length. Same logic as database NUMBER type)
 *
 *
 * Input type="number" (HTML5)
 *
 * Browser compatibility for input type="number" :
 * Chrome : - if first letter is a String : allows everything
 *          - if first letter is a Integer : allows [0-9] and "." and "e" (exponential)
 * Firefox : allows everything
 * Internet Explorer : allows everything
 *
 * Why you should not use input type="number" :
 * When using input type="number" the $parser pipeline of ngModel controller won't be able to access NaN values.
 * For example : viewValue = '1e'  -> $parsers parameter value = "".
 * This is because undefined values are not allowes by default (which can be changed, but better not do it)
 * This makes it impossible to modify the view and model value; to get the view value, pop last character, apply to the view and return to the model.
 *
 * About the ngModel controller pipelines :
 * view value -> $parsers -> model value
 * model value -> $formatters -> view value
 *
 * About the $parsers pipeline :
 * It is an array of functions executed in ascending order.
 * When used with input type="number" :
 * This array has 2 default functions, one of them transforms the datatype of the value from String to Number.
 * To be able to change the value easier (substring), it is better to have access to a String rather than a Number.
 * To access a String, the custom function added to the $parsers pipeline should be unshifted rather than pushed.
 * Unshift gives the closest access to the view.
 *
 * About the $formatters pipeline :
 * It is executed in descending order
 * When used with input type="number"
 * Default function transforms the value datatype from Number to String.
 * To access a String, push to this pipeline. (push brings the function closest to the view value)
 *
 * The flow :
 * When changing ngModel where the directive stands : (In this case only the view has to be changed. $parsers returns the changed model)
 *     -When the value do not has to be modified :
 *     $parsers -> $render();
 *     -When the value has to be modified :
 *     $parsers(view value) --(does view needs to be changed?) -> $render();
 *       |                                  |
 *       |                     $setViewValue(changedViewValue)
 *       |                                  |
 *       --<-------<---------<--------<------
 *
 * When changing ngModel where the directive does not stand :
 *     - When the value does not has to be modified :
 *       -$formatters(model value)-->-- view value
 *     -When the value has to be changed
 *       -$formatters(model vale)-->--(does the value has to be modified) -- (when loop $parsers loop is finished, return modified value)-->view value
 *                                              |
 *                                  $setViewValue(notChangedValue) giving back the non changed value allows the $parsers handle the 'bad' value
 *                                               |                  and avoids it to think the value did not changed
 *                Changed the model <----(the above $parsers loop occurs)
 *
 */

1
   <input type="text" name="profileChildCount" id="profileChildCount" ng-model="profile.ChildCount" numeric-only maxlength="1" />

você pode usar o atributo apenas numérico.


1

DECIMAL

directive('decimal', 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 "";
                        }
                        ctrl.$parsers.push(inputValue);
                    }
                };
            });

DÍGITOS

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

                            if (digits !== value) {
                                ctrl.$setViewValue(digits);
                                ctrl.$render();
                            }
                            return parseInt(digits);
                        }
                        return "";
                    }
                    ctrl.$parsers.push(inputValue);
                }
            };
        });

diretivas angulares para validar números


0

Sei que isso é antigo, mas criei uma diretiva para esse fim caso alguém esteja procurando uma solução fácil. Muito simples de usar.

Você pode conferir aqui .


0

você também pode querer remover o 0 no início da entrada ... Eu simplesmente adiciono um bloco if à resposta de Mordred acima porque ainda não posso fazer um comentário ...

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

          modelCtrl.$parsers.push(function (inputValue) {
              var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null;

              if (transformedInput!=inputValue) {
                  modelCtrl.$setViewValue(transformedInput);
                  modelCtrl.$render();
              }
              //clear beginning 0
              if(transformedInput == 0){
                modelCtrl.$setViewValue(null);
                modelCtrl.$render();
              }
              return transformedInput;
          });
      }
    };
  })

0

Tente isto,

<input ng-keypress="validation($event)">

 function validation(event) {
    var theEvent = event || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode(key);
    var regex = /[0-9]|\./;
    if (!regex.test(key)) {
        theEvent.returnValue = false;
        if (theEvent.preventDefault) theEvent.preventDefault();
    }

}

0

SOLUÇÃO: Eu faço uma diretiva para todas as entradas, número, texto ou qualquer um, no aplicativo, para que você possa inserir um valor e alterar o evento. Faça para angular 6

 import { Directive, ElementRef, HostListener, Input } from '@angular/core';

 @Directive({
// tslint:disable-next-line:directive-selector
selector: 'input[inputType]'
})
  export class InputTypeDirective {
 constructor(private _el: ElementRef) {}

 @Input() inputType: string;
 // tipos: number, letter, cuit, tel

@HostListener('input', ['$event']) onInputChange(event) {
if (!event.data) {
  return;
}

switch (this.inputType) {
  case 'number': {
    const initalValue = this._el.nativeElement.value;
    this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
    if (initalValue !== this._el.nativeElement.value) {
      event.stopPropagation();
    }
     break;
          }
       case 'text': {
        const result = event.data.match(/[^a-zA-Z Ññ]*/g);
        if (result[0] !== '') {
           const initalValue = this._el.nativeElement.value;
           this._el.nativeElement.value = initalValue.replace(
          /[^a-zA-Z Ññ]*/g,
           ''
         );
           event.stopPropagation();
        }
        break;
    }
        case 'tel':
          case 'cuit': {
         const initalValue = this._el.nativeElement.value;
      this._el.nativeElement.value = initalValue.replace(/[^0-9-]*/g, '');
       if (initalValue !== this._el.nativeElement.value) {
         event.stopPropagation();
       }
     }
   }
  }
   }

HTML

     <input matInput inputType="number" [formControlName]="field.name" [maxlength]="field.length" [placeholder]="field.label | translate"  type="text" class="filter-input">

-1

Acabei criando uma diretiva modificada do código acima para aceitar a entrada e alterar o formato na hora ...

.directive('numericOnly', function($filter) {
  return {
      require: 'ngModel',
      link: function(scope, element, attrs, modelCtrl) {

           element.bind('keyup', function (inputValue, e) {
             var strinput = modelCtrl.$$rawModelValue;
             //filter user input
             var transformedInput = strinput ? strinput.replace(/[^,\d.-]/g,'') : null;
             //remove trailing 0
             if(transformedInput.charAt(0) <= '0'){
               transformedInput = null;
               modelCtrl.$setViewValue(transformedInput);
               modelCtrl.$render();
             }else{
               var decimalSplit = transformedInput.split(".")
               var intPart = decimalSplit[0];
               var decPart = decimalSplit[1];
               //remove previously formated number
               intPart = intPart.replace(/,/g, "");
               //split whole number into array of 3 digits
               if(intPart.length > 3){
                 var intDiv = Math.floor(intPart.length / 3);
                 var strfraction = [];
                 var i = intDiv,
                     j = 3;

                 while(intDiv > 0){
                   strfraction[intDiv] = intPart.slice(intPart.length-j,intPart.length - (j - 3));
                   j=j+3;
                   intDiv--;
                 }
                 var k = j-3;
                 if((intPart.length-k) > 0){
                   strfraction[0] = intPart.slice(0,intPart.length-k);
                 }
               }
               //join arrays
               if(strfraction == undefined){ return;}
                 var currencyformat = strfraction.join(',');
                 //check for leading comma
                 if(currencyformat.charAt(0)==','){
                   currencyformat = currencyformat.slice(1);
                 }

                 if(decPart ==  undefined){
                   modelCtrl.$setViewValue(currencyformat);
                   modelCtrl.$render();
                   return;
                 }else{
                   currencyformat = currencyformat + "." + decPart.slice(0,2);
                   modelCtrl.$setViewValue(currencyformat);
                   modelCtrl.$render();
                 }
             }
            });
      }
  };

})


-1
<input type="text" ng-model="employee.age" valid-input input-pattern="[^0-9]+" placeholder="Enter an age" />

<script>
var app = angular.module('app', []);

app.controller('dataCtrl', function($scope) {
});

app.directive('validInput', function() {
  return {
    require: '?ngModel',
    scope: {
      "inputPattern": '@'
    },
    link: function(scope, element, attrs, ngModelCtrl) {

      var regexp = null;

      if (scope.inputPattern !== undefined) {
        regexp = new RegExp(scope.inputPattern, "g");
      }

      if(!ngModelCtrl) {
        return;
      }

      ngModelCtrl.$parsers.push(function(val) {
        if (regexp) {
          var clean = val.replace(regexp, '');
          if (val !== clean) {
            ngModelCtrl.$setViewValue(clean);
            ngModelCtrl.$render();
          }
          return clean;
        }
        else {
          return val;
        }

      });

      element.bind('keypress', function(event) {
        if(event.keyCode === 32) {
          event.preventDefault();
        }
      });
    }
}}); </script>

1
O despejo de código geralmente é desaprovado. Por favor, adicione alguma explicação.
rayryeng

1
para restringir o pressionamento da tecla, tente isto - - - função Número (evt) {var charCode = (evt.which)? evt.which: event.keyCode if (charCode> 31 && (charCode <48 || charCode> 57)) return false; return true; <input type = "number" min = "0" onkeypress = "return Number (event)">
Rahul Sharma

-1

HTML básico

<input type="number" />

Bootstrap básico

<input class="form-control" type="number" value="42" id="my-id">

@Praveen não concordo com você, a pergunta não menciona nenhum bootstrap. por que devemos mencionar que algo não existe na pergunta?
Amr Ibrahim

se quisermos usar bootstrap <input class="form-control" type="number" >
Amr Ibrahim
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.