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

【问题标题】：angular restriction to not allow spaces in text field角度限制不允许文本字段中的空格
【发布时间】：2014-12-05 18:56:59
【问题描述】：

我不希望用户在文本字段中输入空格。我不希望在提交验证时使用它，而是在他们单击时文本字段上不会出现空格。

【问题讨论】：

到目前为止你尝试过什么？我建议您编写一个自定义指令，在 keydown 上监视 keyCode 并采取适当的措施。

标签： angularjs angularjs-directive

【解决方案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>

【讨论】：

这是一个比所选答案更简洁的解决方案。
如果用户将带有空格的字符串粘贴到输入中会发生什么？
@IlyaLuzyanin 好问题。在那种情况下，我最初的指令可能不会起作用。我用一个说明粘贴空格的指令替换了我的答案。
不错，到目前为止我还不知道input 事件:)。但是，此解决方案的问题在于，如果您尝试更改中间或开头的文本，它会将光标置于字符串的末尾。我最终做的是从另一个类似问题中获取您的初始解决方案 + 解决方案：plnkr.co/edit/BqPFIMDfO2HtlERL9QWk?p=preview。似乎工作
我已经应用了这个，但是我输入了随机数据并长时间按回空格，然后输入字段中必须出现字母。

【解决方案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, '');
              }
          });
        }
    };
  });

【讨论】：

如果可以使用简单的replace()，为什么还要使用split() 后跟join()？

【解决方案3】：

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

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

【讨论】：

谢谢，这是最容易使用的。
绝对是最快的
为我节省了很多时间
如果我们复制带有空格的粘贴字符串怎么办？

【解决方案4】：

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

【讨论】：

粘贴文本失败
我明白了。好吧，这可以防止特殊字符，也许它也可以适应禁止空格。粘贴在这里不起作用：kopy.io/KNoU1

【解决方案5】：

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

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

【讨论】：

【解决方案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 />

【讨论】：

【解决方案7】：

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

&lt;input ng-model="myModel" ng-keydown="$event.keyCode != 32 ? $event:$event.preventDefault()"&gt;

【讨论】：

【解决方案8】：

对于 Angular 9，不支持键码。

下面的代码可以帮助你。

keyDownHandler(事件) {

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

【讨论】：