WSTS Page


contenteditableでペースト時にプレーンテキストのみにする

WSTS Page / HTMLとJavaScript / contenteditableでペースト時にプレーンテキストのみにする

contenteditableでペースト時にプレーンテキストのみにする方法です。
contenteditableで、ワードやエクセルなどで書式付きのコピーを行った場合に不必要なHTMLがくっついてしまう場合があります。
不必要なHTML書式が付かないようにJavaScriptでクリップボードからコピーするときに、プレーンテキストでペーストする方法です。

JavaScriptは、クリップボードからtext/plainでテキストを読み出して、execCommandでcontenteditableに挿入します。
JavaScript

function handlepaste(elem, e) {
	var text = e.clipboardData.getData("text/plain");
	//		alert(text);
	document.execCommand("insertHTML", false, text);
}


contenteditableで、onpasteイベントをJavaScriptに渡し、ペーストするテキストをプレーンテキストにします。
onpasteイベントは、falseで戻るようにします。
html

<div class="edit" id="honbun" contenteditable="true" onpaste="handlepaste(this, event);return false;"></div>