Evento "Incolla" in Angular [ngPaste]

Question

Come eseguire una funzione sull'evento "Incolla" in input in Angular 1.1.5? So che c'è una direttiva ng-change per l'input. Ma si accende ogni volta che l'input cambia, ho bisogno solo una volta sulla pasta iniziale.

Caso di utilizzo: ho un input URL. Voglio eseguire una funzione dopo che l'utente ha incollato l'URL. L'utente può anche inserire manualmente l'URL ed eseguire la funzione premendo Invio.

-

Aggiornamento: Dal angolare 1.2.0, ngPaste è una direttiva nativo.

Answer 1

Dal momento che Angular 1.2.0 è presente una direttiva ngPaste. Utilizzare il seguente modo:

<input type='text' ng-paste='handlePaste($event)'> 

per passare il valore immediatamente, l'uso:

<input type='text' ng-paste='handlePaste($event.clipboardData.getData('text/plain'))'> 

Answer 2

In funzione che si dovrebbe usare originalEvent

<input type="text" ng-paste="paste($event)" /> 

Funzione:

$scope.paste = function (e) { 
    console.log(e.originalEvent.clipboardData.getData('text/plain')); 
} 

Answer 3

Volevo condividere la mia soluzione per supportare i browser senza API degli Appunti. Questo dovrebbe funzionare su qualsiasi browser supportato da angoli.

HTML:

<input type="text" ng-paste="copyPasted($event)"> 

JS:

$scope.copyPasted = function ($event){ 
    if(typeof $event.originalEvent.clipboardData !== "undefined"){ 
     $scope.handlePastedData($event.originalEvent.clipboardData.getData('text/plain')); 
    } else { // To support browsers without clipboard API (IE and older browsers) 
     $timeout(function(){ 
      $scope.handlePastedData(angular.element($event.currentTarget).val()); 
     }); 
    } 
}; 

Answer 4

ho implementato questa soluzione per disinfettare testo incollato con un filtro personalizzato rispetto della selezione corrente di ingresso (anche supportato da IE11)

JS:

vm.pasteInput = pasteInput; 

function pasteInput(ev){ 
    var pastedData =''; 
    var domElement = ev.currentTarget; 

    if(typeof ev.originalEvent.clipboardData !== "undefined"){ 
    pastedData = ev.originalEvent.clipboardData.getData('text/plain'); 
    } else if(window.clipboardData){ 
    pastedData = window.clipboardData.getData('Text'); 
    ev.returnValue = false; 
    } 

    pastedData = $filter('inputtext')(pastedData); 

    // inject in correct position between selection 
    if (document.selection) { // IE11 
    domElement.focus(); 
    var sel = document.selection.createRange(); 
    sel.text = pastedData; 
    domElement.focus(); 
    } else if (domElement.selectionStart || domElement.selectionStart === 0){ 
    var startPos = domElement.selectionStart; 
    var endPos = domElement.selectionEnd; 
    domElement.value = domElement.value.substring(0, startPos) + pastedData + domElement.value.substring(endPos, domElement.value.length); 
    domElement.focus(); 
    domElement.selectionStart = startPos + pastedData.length; 
    domElement.selectionEnd = startPos + pastedData.length; 
    } else { 
    domElement.value += pastedData; 
    domElement.focus(); 
    } 

    ev.stopPropagation(); 
    ev.preventDefault(); 

    // update model 
    vm.input.value = domElement.value; 

} 

HTML:

<input type="text" ng-model="vm.input.value" ng-paste="vm.pasteInput($event)" />