Question

是否可以忽略或不允许angularjs中textarea中的换行符？该文本用于pdf生成器，我不希望用户能够键入换行符然后在pdf中看不到它。我宁愿一起忽略返回键。

<textarea ng-model="model.text"></textarea>

Answer 1

在你的controller /指令中，如果你运行一个正则表达式来删除$scope.model.text中所有出现的'\ n'，你应该得到一个没有换行符的普通字符串。

您可以参考此答案：How to replace all occurrences of a string in JavaScript?

如果您甚至不希望文本区域有任何换行符，您可以在观察者中添加上述逻辑，如下所示：

$scope.$watch('model.text', function(){
  $scope.model.text = $scope.model.text.replace(/\n/g, '');
})

Answer 2

使用GísliKonráð和midhunsezhi答案，我能够制定一个符合我想要的指令。信用应该真正归于他们。

.directive('noNewLines', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attributes, ngModelController) {
            var model = attributes.ngModel;
            var regex = new RegExp("^[^\n\r]*$");

            // $parsers handle input from the element where the
            // ng-model directive is set
            ngModelController.$parsers.unshift(function(value) {
                if(!value) return value;
                var modelValue = ngModelController.$modelValue;
                var isValid = regex.test(value);
                ngModelController.$setValidity('Does not match pattern', isValid);

                var transformedInput = value.replace(/[\n\r]/g, '');
                if(transformedInput !== value) {
                    ngModelController.$setViewValue(transformedInput);
                    ngModelController.$render();
                }
               return transformedInput;
            });

            // $formatters handle when the model is changed and 
            // the element needs to be updated
            ngModelController.$formatters.unshift(function(value) {
               if(!value) return value;
               var isValid = regex.test(value);
               ngModelController.$setValidity('Does not match pattern', isValid);
               return value;
            });

            element.on('keypress', function(e) {
                var char = String.fromCharCode(e.which);
                var text = angular.element(e.srcElement).val();
                if(!regex.test(char) || !regex.test(text)) {
                    event.preventDefault();   
                }                   
            });

        }
   };
 });

它的使用方式如下：

<textarea ng-model="text" no-new-lines></textarea>

Answer 3

这是您可以使用的指令。它有阻止无效输入和忽略大小写的选项。

.directive('taPattern', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attributes, ngModelController) {
            var pattern = attributes.taPattern;  
            var flag = attributes.taPatternIgnoreCase === true ? 'i' : undefined;
            var blockInvalidInput = attributes.hasOwnProperty('taPatternBlockInvalid');
            var model = attributes.ngModel;
            if(!pattern) return;
            if(pattern[0] != '^')
                pattern = '^' + pattern;
            if(pattern[pattern.length - 1] != '$')
                pattern += '$';

            var regex = new RegExp(pattern, flag);

            // $parsers handle input from the element where the
            // ng-model directive is set
            ngModelController.$parsers.unshift(function(value) {
               if(!value) return value;
               var modelValue = ngModelController.$modelValue;
               var isValid = regex.test(value);
               ngModelController.$setValidity('Does not match pattern', isValid);
               return value;
            });

            // $formatters handle when the model is changed and 
            // the element needs to be updated
            ngModelController.$formatters.unshift(function(value) {
               if(!value) return value;
               var isValid = regex.test(value);
               ngModelController.$setValidity('Does not match pattern', isValid);
               return value;
            });

            if(blockInvalidInput){                    
                element.on('keypress', function(e) {
                    var char = String.fromCharCode(e.which);
                    var text = angular.element(e.srcElement).val();
                    if(!regex.test(char) || !regex.test(text)) {
                        event.preventDefault();   
                    }                   
                });
            }

        }
   };
 });

你可以在这里看到它的演示：https://jsfiddle.net/mr59xf3z/3/

Answer 4

只是对Angular的较新版本的更新：

component.html：

捕获keyup事件，因为此时绑定变量将包含新的char。

<textarea [(ngModel)]="textAreaContent" (keyup)="keyUp($event)">

component.ts：

不要专门寻找Enter键，因为不同设备之间的键码可能会有所不同。当用户粘贴文本时，也不会捕获不需要的字符。获取所有击键，然后进行替换。

public textAreaContent;

keyUp(event:KeyboardEvent) {
  console.log(event.key+" pressed");
  this.textAreaContent = this.textAreaContent.replace(/[\r\n]+/," ");
}

Answer 5

使用<input代替<textarea并设置高度，如textarea。

＆＃13;

input.textarea {
  height: 100px;
  
  word-break: break-word;
  width: 300px;
}

＆＃13;

<input class="textarea">

＆＃13;

如何让textarea不允许或忽略AngularJS中的linebreak / newline / return

5 个答案: