"粘贴“;Angular[ngPaste]中的事件

"Paste" event in Angular [ngPaste]

本文关键字：ngPaste 事件 Angular quot 粘贴      更新时间：2023-09-26

如何在Angular 1.1.5中的输入中执行"粘贴"事件的函数？我知道有一个ng-change指令用于输入。但每次输入更改时它都会启动，我只需要在初始粘贴时启动一次。

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

--

更新：由于Angular 1.2.0，ngPaste是一个本机指令。

由于Angular 1.2.0有一个ngPaste指令。使用以下方式：

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

要直接传递值，请使用：

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

在函数中，您应该使用originalEvent

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

功能：

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

想分享我的解决方案，以支持没有剪贴板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());
        });
    }
};

我已经实现了这个解决方案，以针对当前输入选择（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)" />
相关文章：