Я не хочу, чтобы пользователь вводил пробелы в текстовое поле. Я не хочу, чтобы он отправлял проверку, а скорее - пространство не будет отображаться в текстовом поле, когда они его нажмут.
Angular ограничение на отсутствие пробелов в текстовом поле
Ответ 1
<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, '');
}
});
}
};
});
Ответ 2
Выбранный ответ, возможно, не очень ненавязчивый. И если вам нужно использовать его в нескольких местах, вы получите дублированный код.
Я предпочитаю не допускать ввода пробелов, используя следующую директиву.
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>
Ответ 3
Директива, написанная Джейсоном, не работала для меня. Мне пришлось изменить 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();
}
});
}
}
});
Ответ 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;
});
}
}
});
Ответ 5
Если вы хотите достичь этого без написания директивы
ng-keydown="$event.keyCode != 32 ? $event:$event.preventDefault()"