Winkelbeschränkung, um keine Leerzeichen im Textfeld zuzulassen

Question

Ich möchte nicht, dass ein Benutzer Leerzeichen in ein Textfeld eingibt. Ich möchte es nicht bei der Validierung, sondern - ein Leerzeichen wird nicht auf dem Textfeld angezeigt, wenn es darauf klickt.

Answer 1

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

Update: um die Codequalität verbessern Sie benutzerdefinierte Richtlinie stattdessen erstellen können. Aber vergiss nicht, dass deine Anweisung die Eingabe nicht nur von der Tastatur, sondern auch vom Einfügen verhindern sollte.

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

ist es wichtig, ng-trim = "false" Attribut hinzufügen einem Eingang zu deaktivieren Trimmen.

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, ''); 
       } 
      }); 
     } 
    }; 
    }); 

Answer 2

Die ausgewählte Antwort ist wohl nicht sehr unobtrusive. Und wenn Sie es an mehreren Stellen verwenden müssen, erhalten Sie doppelten Code.

Ich bevorzuge die Eingabe von Leerzeichen mit der folgenden Direktive zu verhindern.

<input type="text" disallow-spaces> 

Answer 3

der Richtlinie Jason hat nicht funktioniert für mich schrieb:

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

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

Diese Direktive kann wie folgt aufgerufen werden. Ich musste zurückkehren ändern falsch: e.preventDefault() wie folgt:

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

     link: function($scope, $element) { 
      $element.bind('keydown', function(e) { 
       if (e.which === 32) { 
        e.preventDefault(); 
       } 
      }); 
     } 
    } 
}); 

Answer 4

Dies funktioniert spezielles Zeichen einschließlich Leerzeichen verhindern eingeben:

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; 
     }); 
    } 
} 
}); 

Answer 5

Wenn Sie sie erreichen wollen, ohne Richtlinie schreiben

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