angulaire de la restriction de ne pas autoriser les espaces dans le champ de texte

Je ne veux pas un utilisateur de saisir des espaces dans un champ de texte. Je ne veux pas de ça sur soumettre la validation, mais plutôt un espace ne sera pas affiché sur le champ de texte lorsqu'ils cliquent sur elle.

Qu'avez-vous essayé jusqu'à présent? Je vous suggère d'écrire une coutume directive montres mot de code sur keydown et prendre les mesures appropriées.

OriginalL'auteur KingKongFrog | 2014-12-05

  1. 15
    <input ng-model="field" ng-trim="false" ng-change="field = field.split(' ').join('')" type="text">

    Mise à jour:
    Pour améliorer la qualité du code, vous pouvez créer sur mesure la directive à la place. Mais n'oubliez pas que votre directive doit empêcher l'entrée, non seulement à partir du clavier, mais aussi de coller.

    <input type="text" ng-trim="false" ng-model="myValue" restrict-field="myValue">

    Ici est important d'ajouter ng-trim="false" attribut pour désactiver le découpage de l'entrée.

    angular
  .module('app')
  .directive('restrictField', function () {
    return {
        restrict: 'AE',
        scope: {
            restrictField: '='
        },
        link: function (scope) {
          //this will match spaces, tabs, line feeds etc
          //you can change this regex as you want
          var regex = /\s/g;

          scope.$watch('restrictField', function (newValue, oldValue) {
              if (newValue != oldValue && regex.test(newValue)) {
                scope.restrictField = newValue.replace(regex, '');
              }
          });
        }
    };
  });
    Pourquoi utiliser un split() suivie par un join() si vous pouvez utiliser un simple replace() à la place?

    OriginalL'auteur Qustion

  2. 27

    La réponse sélectionnée est sans doute pas très discrète. Et si vous avez besoin de l'utiliser dans de multiples endroits, vous vous retrouverez avec le code dupliqué.

    Je préfère prévenir l'entrée des espaces à l'aide de la directive suivante.

    app.directive('disallowSpaces', function() {
  return {
    restrict: 'A',

    link: function($scope, $element) {
      $element.bind('input', function() {
        $(this).val($(this).val().replace(//g, ''));
      });
    }
  };
});

    Cette directive peut être invoquée comme ceci:

    <input type="text" disallow-spaces>
    C'est une bien meilleure solution que la réponse choisie.
    Qu'arriverait-il si l'utilisateur a collé une chaîne de caractères avec des espaces pour une entrée?
    Bonne question. Mon directive d'origine probablement n'aurait pas travaillé dans ce cas. J'ai remplacé ma réponse avec une directive qui ne compte pour les espaces de coller.
    Joli, je ne connaissais pas input cas jusqu'à maintenant :). Le problème avec cette solution est que, il place le curseur à la fin de la chaîne si vous tentez de modifier le texte dans le milieu ou au début. Ce que j'ai à faire est de prendre votre solution initiale solution + à partir d'une autre question similaire: plnkr.co/modifier/BqPFIMDfO2HtlERL9QWk?p=preview. Semble fonctionner
    J'ai appliqué ce mais je type de données aléatoires et appuyez sur espace pour le temps long qui doit ensuite les lettres vient dans le champ de saisie.

    OriginalL'auteur Jason Swett

  3. 3

    La directive Jason a écrit n'a pas de travail pour moi. J'ai dû changer return false: la e.preventDefault() comme ceci:

    app.directive('disallowSpaces', function() {
    return {
        restrict: 'A',

        link: function($scope, $element) {
            $element.bind('keydown', function(e) {
                if (e.which === 32) {
                    e.preventDefault();
                }
            });
        }
    }
});
    échoué sur coller le texte
    Je vois. Eh bien cela fonctionne pour prévenir les caractères spéciaux, c'est peut-être adaptable à interdire les espaces trop. Coller ne fonctionnent pas ici: kopy.io/KNoU1

    OriginalL'auteur Bento

  4. 2

    Cela fonctionne pour empêcher l'entrée de tout les caractères spéciaux (espaces compris):

    app.directive('noSpecialChar', function() {
return {
    require: 'ngModel',
    restrict: 'A',
    link: function(scope, element, attrs, modelCtrl) {
        modelCtrl.$parsers.push(function(inputValue) {
            if (inputValue == null)
                return ''
            let cleanInputValue = inputValue.replace(/[^\w]|_/gi, '');
            if (cleanInputValue != inputValue) {
                modelCtrl.$setViewValue(cleanInputValue);
                modelCtrl.$render();
            }
            return cleanInputValue;
        });
    }
}
});

    OriginalL'auteur Bento

  5. 2

    Si vous voulez l'atteindre sans avoir à écrire de la directive

    ng-keydown="$event.keyCode != 32 ? $event:$event.preventDefault()"

    Merci, c'est le plus facile à utiliser.

    OriginalL'auteur sachin bachhav