onpaste=falseを設置、ドラッグ＆ドロップは可能

1年 ago
夏樹, 風
1 minute

貼り付け時にonpasteをfalseに設定すると、ユーザーはテキストを要素に貼り付けて挿入できなくなります。ただし、要素にテキストやその他のコンテンツをドラッグアンドドロップで挿入することはできます。

サンプルコードは以下のとおりです。

この文を日本語でネイティブ風に言い換えると次のようになります。

<input type="text" id="myInput" onpaste="return false;" ondrop="handleDrop(event)">

ネイティブの日本語でパラフレーズ

function handleDrop(event) {
event.preventDefault();
var text = event.dataTransfer.getData("text");
document.getElementById("myInput").value += text;
}

このサンプルでは、onpasteはfalseに設定されており、ユーザーがコンテンツの貼り付けによってテキストを挿入しようとした際に何のアクションも発生しないことを意味します。しかし、ondropイベントとそれに対応する処理関数handleDropを使用することで、ユーザーは引き続き、内容をドラッグアンドドロップすることで要素にテキストを挿入できます。

bannerAds