restrizione angolare per non consentire spazi nel campo di testo

Question

Non voglio che un utente inserisca spazi in un campo di testo. Non voglio che invii la convalida, ma piuttosto: uno spazio non verrà visualizzato nel campo di testo quando lo fanno clic.

Answer 1

<input ng-model="field" ng-trim="false" ng-change="field = field.split(' ').join('')" type="text"> 

Aggiornamento: Per migliorare la qualità del codice è possibile invece creare direttive personalizzate. Ma non dimenticare che la tua direttiva dovrebbe impedire l'input non solo da tastiera, ma anche da incollare.

<input type="text" ng-trim="false" ng-model="myValue" restrict-field="myValue"> 

Qui è importante aggiungere l'attributo ng-trim = "falso" per disabilitare il taglio di un input.

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 2

La risposta selezionata è probabilmente non molto unobtrusive. E se hai bisogno di usarlo in più posti, finirai con il codice duplicato.

Preferisco impedire l'immissione di spazi utilizzando la seguente direttiva.

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

    link: function($scope, $element) { 
     $element.bind('input', function() { 
     $(this).val($(this).val().replace(/ /g, '')); 
     }); 
    } 
    }; 
}); 

Questa direttiva può essere invocato in questo modo:

<input type="text" disallow-spaces> 

Answer 3

della direttiva Jason ha scritto non ha funzionato per me. Ho dovuto cambiare return false a: e.preventDefault() in questo modo:

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

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

Answer 4

Questo funziona per impedire di entrare eventuali caratteri speciali compresi gli spazi:

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

Se si vuole raggiungere è senza scrivere direttiva

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