Question

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

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

-

更新：自Angular 1.2.0起，ngPaste是一个原生指令。

Answer 1

自Angular 1.2.0起，有一个ngPaste指令。使用以下方式：

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

要立即传递该值，请使用：

<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的浏览器。这应该适用于角度支持的任何浏览器。

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：

public async Task<List<T>> GetTableEntitiesAsync<T>(string partition) where T : ITableEntity, new()
{
    TableQuery<T> recordsQuery = new TableQuery<T>().Where(
        TableQuery.GenerateFilterCondition("PartitionKey", QueryComparisons.Equal, partition));
    List<T> myList = new List<T>();

    var items = await this.GetTable<T>().ExecuteQuerySegmentedAsync<T>(recordsQuery, null);
    myList = items.ToList();

    return myList; // when Readonly all records have Created == DateTime.Now
}

HTML：

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;

}

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

4 个答案: