mrgarita/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<title>JS:貼り付け（ペースト）イベントに対応させる</title>
	<meta name="viewport" content="width=device-width">
	<script type="text/javascript" src="main.js"></script>
</head>
<body>
	<header>
		<h1>貼り付け（ペースト）イベントに対応させる</h1>
	</header>

	<div id="contents">
		<textarea id="textBox" placeholder="文字を入力してください..."></textarea>
	</div>

	<footer>
		<p>&copy; 2019 <a target="_blank" href="https://dianxnao.com/">dianxnao.com</a></p>
	</footer>
</body>
</html>

## main.js
/* main.js */

var textBox = null;			// テキストボックス

/*
 * onpasteHandler: 貼り付け（ペースト）したときの処理
 */
function onpasteHandler(){
	let value = textBox.value;
	textBox.style.backgroundColor = "pink";
	console.log("貼り付け内容[" + value + "]");
}

/*
 * 起動時の処理
 */
window.onload = function(){
	// DOM取得
	textBox = document.getElementById("textBox");	// テキストボックス

 	// イベント設定
	textBox.addEventListener("paste", onpasteHandler, false);				// 100ミリ秒後に実行（貼り付けが反映されてから実行）

}

## style.css
/* style.css */

/* 全体 */
*{
	margin: 0;
	padding: 0;
}

body, textarea{
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
	background-color: #fff;
	color: #546e7a;
}
/* ヘッダ */
header{
	background-color: #ffffff;
	color: #000000;
	border-bottom: solid 1px #000000;
}
header h1{
	padding: 20px 40px;
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
}
/* コンテンツ */
div#contents{
	font-size: 16pt;
	background-color: #ffffff;
	box-shadow:  0 0 10px rgba(0, 0, 0, 0.2);
}
div#contents textarea{
	width: 100%;
	height: 10em;
	color: #000;
	border: solid 1px #ddd;
}
/* フッタ */
footer{
	padding: 20px 40px;
	font-size: 14pt;
	background-color: #ffffff;
	color: #000000;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #dddddd;
}
/* リンクタグ */
a{
	color: #000000;
	text-decoration: none;
}

/* メディアクエリ設定 */
@media screen and (min-width:961px) {
/* pc用のcssを記述 */
	header h1{
		font-size: 20pt;
	}
	div#contents{
		width: 800px;
		margin: 20px auto;
		padding: 2em;
	}
	footer{
		text-align: right;
	}
	img{ max-width:500px; width /***/:auto; /*IE8用ハック*/
}
}

@media only screen and (min-width:376px) and (max-width:960px) {
/* tablet用のcssを記述 */
	header h1{
		padding: 20px;
		text-align: center;
		font-size: 16pt;
	}
	div#contents{
		width: auto;
		margin: 10px 10px;
		padding: 1em;
		font-size: 15pt;
	}
	footer{
		padding: 20px;
		text-align: center;
	}
}

@media screen and (max-width:375px) {
/* スマホ用のcssを記述 */
	header h1{
		padding: 20px;
		text-align: center;
		font-size: 14pt;
	}
	div#contents{
		width: auto;
		margin: 0 0;
		padding: 1em;
		font-size: 13pt;
	}
	footer{
		padding: 20px;
		text-align: center;
	}
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<title>JS:貼り付け（ペースト）イベントに対応させる</title>
	<meta name="viewport" content="width=device-width">
	<script type="text/javascript" src="main.js"></script>
	</head>
	<body>
	<header>
	<h1>貼り付け（ペースト）イベントに対応させる</h1>
	</header>

	<div id="contents">
	<textarea id="textBox" placeholder="文字を入力してください..."></textarea>
	</div>

	<footer>
	<p>© 2019 <a target="_blank" href="https://dianxnao.com/">dianxnao.com</a></p>
	</footer>
	</body>
	</html>
	/* main.js */

	var textBox = null; // テキストボックス

	/*
	* onpasteHandler: 貼り付け（ペースト）したときの処理
	*/
	function onpasteHandler(){
	let value = textBox.value;
	textBox.style.backgroundColor = "pink";
	console.log("貼り付け内容[" + value + "]");
	}

	/*
	* 起動時の処理
	*/
	window.onload = function(){
	// DOM取得
	textBox = document.getElementById("textBox"); // テキストボックス

	// イベント設定
	textBox.addEventListener("paste", onpasteHandler, false); // 100ミリ秒後に実行（貼り付けが反映されてから実行）

	}
	/* style.css */

	/* 全体 */
	*{
	margin: 0;
	padding: 0;
	}

	body, textarea{
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
	background-color: #fff;
	color: #546e7a;
	}
	/* ヘッダ */
	header{
	background-color: #ffffff;
	color: #000000;
	border-bottom: solid 1px #000000;
	}
	header h1{
	padding: 20px 40px;
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
	}
	/* コンテンツ */
	div#contents{
	font-size: 16pt;
	background-color: #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}
	div#contents textarea{
	width: 100%;
	height: 10em;
	color: #000;
	border: solid 1px #ddd;
	}
	/* フッタ */
	footer{
	padding: 20px 40px;
	font-size: 14pt;
	background-color: #ffffff;
	color: #000000;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #dddddd;
	}
	/* リンクタグ */
	a{
	color: #000000;
	text-decoration: none;
	}

	/* メディアクエリ設定 */
	@media screen and (min-width:961px) {
	/* pc用のcssを記述 */
	header h1{
	font-size: 20pt;
	}
	div#contents{
	width: 800px;
	margin: 20px auto;
	padding: 2em;
	}
	footer{
	text-align: right;
	}
	img{ max-width:500px; width /**/:auto; /IE8用ハック*/
	}
	}

	@media only screen and (min-width:376px) and (max-width:960px) {
	/* tablet用のcssを記述 */
	header h1{
	padding: 20px;
	text-align: center;
	font-size: 16pt;
	}
	div#contents{
	width: auto;
	margin: 10px 10px;
	padding: 1em;
	font-size: 15pt;
	}
	footer{
	padding: 20px;
	text-align: center;
	}
	}

	@media screen and (max-width:375px) {
	/* スマホ用のcssを記述 */
	header h1{
	padding: 20px;
	text-align: center;
	font-size: 14pt;
	}
	div#contents{
	width: auto;
	margin: 0 0;
	padding: 1em;
	font-size: 13pt;
	}
	footer{
	padding: 20px;
	text-align: center;
	}
	}