【javaScript】KeyboardEventでペースト操作を実現したい

IE11で、KeyboardEventでペースト操作を実現させたく、
試行錯誤の末に以下のコードに行きつきましたが、
シンタックスエラーにはならないものの動作しません。

cripboadData.getData(”text”)で取得した値をエレメントに設定する手もありますが、
今回は、JavaScriptで実施したペースト操作をイベントリスナでつかみたいので、
KeyboardEventでのペースト操作にこだわっている次第です。

そもそもKeyboardEventでペースト操作などできないものなのでしょうか？

ご教示のほどよろしくお願いします。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<script type="text/javascript">
<!--
//　ペーストされたことの確認のためのリスナ
document.getElementById('aaaaa').addEventListener("paste" , function(e){
alert("paste");
});


document.getElementById('aaaaa').focus();

var event = document.createEvent('KeyboardEvent'); // create a key event
event.initKeyboardEvent("keypress", // typeArg,
true, // canBubbleArg,
true, // cancelableArg,
null, // viewArg, Specifies UIEvent.view. This value may be null.
true, // ctrlKeyArg,
false, // altKeyArg,
false, // shiftKeyArg,
false, // metaKeyArg,
86, // keyCodeArg,
0); // charCodeArg);


document.getElementById('aaaaa').dispatchEvent(event);

-->
</script>

No.1 ベストアンサー 回答者： fujillin 回答日時： 2017/06/09 10:32

こんにちは

イベントに詳しいわけではないのと、意図がイマイチよくわからないのですが・・・

＞試行錯誤の末に以下のコードに行きつきましたが、
＞シンタックスエラーにはならないものの動作しません。
ご提示のスクリプは、後半部分でkeypressイベントを発生させています。
これに対して、前半ではpasteイベントのリスナを設定しているので、このリスナが呼ばれることはないですよね？
リスナのイベントタイプをkeypressにして設定しておけば、当然、呼び出されます。

＞そもそもKeyboardEventでペースト操作などできないものなのでしょうか？
イベントの発生と、実際の処理とは別のものです。
カスタムイベントとして定義することによって、pasteやpasteSpecialなどであっても、イベントを設定することは可能ですが、これが自動的に「いわゆるペースト処理」をしてくれるものを意味するわけではありません。
（単にカスタムに設けたイベントタイプの一種に過ぎないので）
それなので、そのイベントを発生させても、単純に、pasteイベントなどが発生するだけです。

例えば、リンク要素のクリックイベントにリスナを設定しておけば、クリック時に呼び出されますが、クリックイベントと「リンク先に遷移する処理」は別のものですよね？
マークアップの機能として「リンク要素をクリックしたら指定URLに遷移する」とされていて、この処理はブラウザのエンジンが別に処理をしています。
もしも、カスタムイベントで「何らかの処理」をさせたいということであるのなら、それこそリスナの処理の中にその処理を記述しておくということになるのではないでしょうか？

補足ですが、カスタムイベントを使用する際には、initEvent()等でイベントオブジェクトの初期化をしておく必要があるようです。
https://msdn.microsoft.com/ja-jp/library/ff97545 …


※ ご質問の意図がよくわからないので、思いつくままに記していますが、何かのご参考にでもなれば。

この回答へのお礼

早速のコメントありがとうございます。

詳しくご教示いただきありがとうございます！
「イベントの発生と、実際の処理とは別のもの」、私の認識不足でもあったので大変参考になりました。だから実際にペースト処理が走らないのかもしれません。

ID:'aaaaa'（Input type='text'）の要素に対してdispatchEventでCTRL+Vキー押下操作を実施したつもりだったので、その結果として'aaaaa'要素に対して「いわゆるペースト処理」が行われ、そのペースト処理のイベント発生を「addEventListener("paste"・・・」でハンドリングできるのではないかと考えた次第です。

ペーストのイベントは発生してもよさそうな気もしますが、そこはもう少し調べるとして、それをハンドリングできたら、ID:'aaaaa'要素に実際に値を設定する処理を実装する必要があるということがわかり一歩前進です。

ありがとうございました！

お礼日時：2017/06/09 15:23