Come rendere textarea non consentire o ignorare interruzione di riga/newline/return in AngularJS

Question

È possibile ignorare o non consentire interruzioni di riga in un'area di testo in angularjs? Il testo è utilizzato in un generatore di PDF e non voglio che l'utente sia in grado di digitare una nuova riga quindi non vederla nel pdf. Preferirei che la chiave di ritorno fosse ignorata tutti insieme.

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

Answer 1

Utilizzando Gísli Konrad e risposte midhunsezhi sono stato in grado di mettere insieme una direttiva che ha fatto quello che voglio. Il merito dovrebbe andare davvero a loro.

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

     } 
    }; 
}); 

Ed è usato in questo modo:

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

Answer 2

nel controller/direttiva se si esegue una regex per rimuovere tutte le occorrenze di '\ n' in $scope.model.text, si dovrebbe ottenere una stringa pianura senza caratteri di nuova riga.

è possibile fare riferimento a questa risposta per farlo: How to replace all occurrences of a string in JavaScript?

Se non si vuole anche l'area di testo per avere qualche interruzioni di riga è possibile aggiungere la logica di cui sopra in un osservatore come questo:

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

Answer 3

Utilizzare <input anziché <textarea e impostare l'altezza come textarea.

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

<input class="textarea">

Answer 4

Ecco una direttiva che è possibile utilizzare. Ha opzioni per bloccare l'input non valido e per ignorare il caso.

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

     } 
    }; 
}); 

Si può vedere una demo di qui: https://jsfiddle.net/mr59xf3z/3/