javascript - Angular の「貼り付け」イベント [ngPaste]

Question

Angular 1.1.5の入力で「貼り付け」イベントで関数を実行するには? ng-change入力用のディレクティブがあることは知っています。ただし、入力が変更されるたびに起動します。最初の貼り付けで1回だけ必要です。

ユースケース: 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 を使用せずにブラウザをサポートするソリューションを共有したいと考えました。これは、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());
        });
    }
};