在angularjs中是否可以忽略或不允许textarea中的换行符？该文本用于pdf生成器，我不希望用户能够键入换行符然后在pdf中看不到它。我宁愿一起忽略返回键。
<textarea ng-model="model.text"></textarea>
在angularjs中是否可以忽略或不允许textarea中的换行符？该文本用于pdf生成器，我不希望用户能够键入换行符然后在pdf中看不到它。我宁愿一起忽略返回键。
<textarea ng-model="model.text"></textarea>
在您的控制器/指令中，如果运行正则表达式以删除所有出现的'\ n' $scope.model.text，你应该得到一个没有换行符的普通字符串。
您可以参考这个答案来做到这一点： 如何在JavaScript中替换所有出现的字符串？
如果您甚至不希望文本区域有任何换行符，您可以在观察者中添加上述逻辑，如下所示：
$scope.$watch('model.text', function(){
$scope.model.text = $scope.model.text.replace(/\n/g, '');
})
使用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>
这是您可以使用的指令。它有阻止无效输入和忽略大小写的选项。
.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/
使用 <input 代替 <textarea 并设置像textarea的高度。
input.textarea {
height: 100px;
word-break: break-word;
width: 300px;
}<input class="textarea">