Angular [ngPaste] triggers when content is pasted

Question

Angular [ngPaste] triggers when content is pasted

Is there a way to trigger a function on the "Paste" event in an input field using Angular 1.1.5? I am aware of the ng-change directive, but it fires every time the input changes. I only need it to trigger once after the initial paste.

For instance, I have a URL input field and I want to perform a specific action after the user pastes a URL into it. The user should also be able to manually enter the URL and trigger the function by pressing Enter.

--

Update: Starting from Angular 1.2.0, there is a native ngPaste directive available.

javascript angularjs angularjs-directive

Answer 1

Answer №1

Starting from Angular version 1.2.0, a new directive called ngPaste was introduced for handling paste events. You can implement it in the following manner:

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

If you want to pass the pasted value directly, you can do so using the code below:

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

Answer 2

Starting from Angular version 1.2.0, a new directive called ngPaste was introduced for handling paste events. You can implement it in the following manner:

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

If you want to pass the pasted value directly, you can do so using the code below:

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

Answer 3

Answer №2

When writing a function, remember to include the originalEvent

 <textarea onpaste="handlePaste(event)"></textarea>

The function should look like this:

function handlePaste(e) {
    console.log(e.originalTarget.clipboardData.getData('text'));
}

Answer 4

When writing a function, remember to include the originalEvent

 <textarea onpaste="handlePaste(event)"></textarea>

The function should look like this:

function handlePaste(e) {
    console.log(e.originalTarget.clipboardData.getData('text'));
}

Answer 5

Answer №3

Here is a solution I came up with to address browsers that do not support clipboard API. This method should be compatible with any browser that angular framework supports.

Here is the HTML code:

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

And here is the JavaScript code:

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

Answer 6

Here is a solution I came up with to address browsers that do not support clipboard API. This method should be compatible with any browser that angular framework supports.

Here is the HTML code:

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

And here is the JavaScript code:

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

Answer 7

Answer №4

I have successfully incorporated a solution to sanitize copied text using a custom filter that takes into account the current input selection, including support for 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);

  // insert at correct position within 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)" />

Answer 8

I have successfully incorporated a solution to sanitize copied text using a custom filter that takes into account the current input selection, including support for 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);

  // insert at correct position within 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)" />

Angular [ngPaste] triggers when content is pasted

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using jQuery to track the status of checkboxes

Execute a separate function when clicking on certain buttons without interfering with the buttons' original onclick function (which has already been assigned) - JavaScript

I can't figure out why the callback function for my $.get() request is not being triggered when I send data to the Express

transferring a delicious cookie to the browser

I am looking to include an icon in an angular tab to facilitate its closure using ui-bootstrap

What is causing the click event handler to only function on the initial page?

Arranging CouchDB/Couchbase view based on the quantity of keys

retrieving the selected date from the calendar widget

Pagination of AJAX result on the client side using jQuery

What steps can I take to stop jQuery's $.getJSON function from converting my AJAX response keys into integers?

Output the JSON string retrieved from a specified URL

The context menu event fails to activate on browsers running iOS 13.1 and higher when attempting to select text

Is it possible to retrieve the ng-model name from an element?

Angular's inline style manipulation fails to function in IE browser

Tips for adding content to a textarea with JavaScript without disrupting the editing history

Ag-Grid's external filtering feature does not update when there are changes in the state

Unexpected changes are observed in the size of DIV elements when adjusting the SVG viewBox

`I am unable to locate the JSON file within Angular 2`

Is the integer node reaching its limit?

Omit specific TagNames from the selection