javascript - Angular [ngPaste] 中的“粘贴”事件

Question

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

用例：我有一个 URL 输入。我想在用户粘贴 URL 后执行一个函数。用户也可以手动输入 URL 并按 Enter 键执行该功能。

--

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

Answer 1

Since Angular 1.2.0 there is an ngPaste directive. Use the following way:

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

To pass the value straightaway, use:

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

Answer 2

在功能中，您应该使用originalEvent

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

功能：

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

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

Answer 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)" />