角度限制不允许文本字段中的空格

Question

我不希望用户在文本字段中输入空格.我不想在提交验证时使用它,而是在单击文本字段时不会显示空格.

Answer 1

选择的答案可能不是非常不引人注目的.如果你需要在多个地方使用它,你最终会得到重复的代码.

我更喜欢使用以下指令阻止输入空格.

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

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

可以像这样调用该指令:

<input type="text" disallow-spaces>

Answer 2

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

更新:为了提高代码质量,您可以创建自定义指令.但是不要忘记你的指令不仅要防止来自键盘的输入,还要防止粘贴.

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

添加ng-trim ="false"属性以禁用输入修剪非常重要.

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 3

如果您想在不编写指令的情况下实现它

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