Question

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

Answer 1

选择的答案可能不是很unobtrusive。如果你需要在多个地方使用它，你最终会得到重复的代码。

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

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

Jason所写的指令对我不起作用。我不得不将return false更改为：e.preventDefault（），如下所示：

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

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

Answer 4

这可以防止输入任何特殊字符，包括空格：

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

如果你想在没有编写指令的情况下实现它

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

Answer 6

在不使用jquery的情况下使用

 angular.module('app').directive('disallowSpaces', function () {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
      maxvalue: '=',
    },
    link: function ($scope, $element, attr, ngModelCtrl) {
      $element.bind('keydown', function () {
        function transformer(text) {
          if (text) {
            var transformedInput = text.replace(/ /g, '');
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
            return transformedInput;
          }
          return undefined;
        }
        ngModelCtrl.$parsers.push(transformer);
      });
    },
  };
});

// use disallow-spaces

<input type="text" ng-model="name" disallow-spaces />

Answer 7

您无需编写指令即可实现此目的。

<input ng-model="myModel" ng-keydown="$event.keyCode != 32 ? $event:$event.preventDefault()">

Answer 8

对于Angular 9，不支持键码。

下面的代码可以帮助您实现这一目标。

keyDownHandler（event）{

    if (event.code === 'Space') {
        event.preventDefault();
    }
}

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

8 个答案: