Angular [ngPaste] 中的“粘贴”事件答案

【问题标题】："Paste" event in Angular [ngPaste]Angular [ngPaste] 中的“粘贴”事件
【发布时间】：2013-08-29 13:39:52
【问题描述】：

如何在 Angular 1.1.5 的输入中对“粘贴”事件执行函数？我知道有一个ng-change 输入指令。但是每次输入更改时它都会触发，我只需要在初始粘贴时进行一次。

用例：我有一个 URL 输入。我想在用户粘贴 URL 后执行一个函数。用户也可以手动输入网址，回车执行功能。

更新：从 Angular 1.2.0 开始，ngPaste 是一个原生指令。

【问题讨论】：

为什么不创建一个自定义指令来监听输入粘贴到什么时候？
您可以使用一些 jquery 技巧创建一个指令，例如 stackoverflow.com/questions/686995/jquery-catch-paste-input

标签： javascript angularjs angularjs-directive

【解决方案1】：

从 Angular 1.2.0 开始有一个 ngPaste 指令。使用如下方式：

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

要直接传递值，请使用：

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

【讨论】：

仅供参考，没有$event.clipboardData，但有$event.originalEvent

【解决方案2】：

在函数中你应该使用 originalEvent

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

功能：

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

【讨论】：

【解决方案3】：

想分享我的解决方案，以支持没有剪贴板 API 的浏览器。这应该适用于 Angular 支持的任何浏览器。

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

【讨论】：

【解决方案4】：

我已经实现了这个解决方案，以针对当前输入选择使用自定义过滤器来清理粘贴的文本（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)" />

【讨论】：

var pastedData = $window.clipboardData.getData('Text');正在为 IE 11 工作。它节省了我的时间