mrgarita/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<!-- index.html -->
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<title>テキストボックスの文字数を得る</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">
		<p id="textLength">0</p>
		<textarea id="textBox" placeholder="文字を入力してください..."></textarea>
		<div id="flex-container">
			<div class="item"><label><input id="withoutCR" type="checkbox">改行をはぶく</label></div>
			<div class="item"><label><input id="withoutSpace" type="checkbox">半角スペースをはぶく</label></div>
			<div class="item"><label><input id="withoutByteSpace" type="checkbox">全角スペースをはぶく</label></div>
		</div>
	</div>

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

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

var textBox = null;			// テキストボックス
var textLength = null;		// テキストボックス内の文字数表示部分
var withoutCR = null;			// チェックボックス - 改行をはぶく
var withoutSpace = null;		// チェックボックス - 半角スペースをはぶく
var withoutByteSpace = null;	// チェックボックス - 全角スペースをはぶく

/*
 * keyHandler: テキストボックス内の文字を表示する関数
 */
function keyHandler(){
	// テキストボックスの文字列を取得
	let textValue = textBox.value;

	// チェックボックスの状態を取得
	let noCR = withoutCR.checked;
	let noSpace = withoutSpace.checked;
	let noByteSpace = withoutByteSpace.checked;

	// チェックボックスの状態によって数え方を変える
	if(noCR){
		textValue = textValue.replace(/\n/g, "");	// 改行をはぶく
	}
	if(noSpace){
		textValue = textValue.replace(/ /g, "");	// 半角スペースをはぶく
	}
	if(noByteSpace){
		textValue = textValue.replace(/　/g, "");	// 全角スペースをはぶく
	}

	// 文字数を取得して表示
	let n = textValue.length;
	textLength.innerHTML = n + " 文字";
}

/*
 * 起動時の処理
 */
window.onload = function(){
	// DOM取得
	textBox = document.getElementById("textBox");						// テキストボックス
	textLength = document.getElementById("textLength");					// 文字数表示部分
	withoutCR = document.getElementById("withoutCR");					// チェックボックス（改行をはぶく）
	withoutSpace = document.getElementById("withoutSpace");			// チェックボックス（半角スペースをはぶく）
	withoutByteSpace = document.getElementById("withoutByteSpace");	// チェックボックス（全角スペースをはぶく）

 	// イベント設定（いずれのイベントもkeyHandlerを呼び出して文字表示を行っている）
	textBox.addEventListener("keyup", keyHandler, false);	// テキストボックス内でキーを離したとき
	textBox.addEventListener("paste", function(){			// テキストボックス内で貼り付けをしたとき
		setTimeout(keyHandler, 100);						//	Ctrl+V, マウス右クリック+貼り付け双方に対応
	}, false);
	withoutCR.addEventListener("click", keyHandler, false);	// チェックボックスをクリックしたとき
	withoutSpace.addEventListener("click", keyHandler, false);
	withoutByteSpace.addEventListener("click", keyHandler, false);

	// テキストボックスの文字数を表示
	keyHandler();
}

## 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 h2{
	font-size: 17pt;
	font-weight: 600;
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
}
div#contents p{
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
}
div#contents textarea{
	width: 100%;
	height: 10em;
	color: #000;
	border: solid 1px #ddd;
}
div#contents label{
	font-size: 0.8em;
}
div#contents input[type="checkbox"]{
	margin-right: 0.5em;
}
/* フレックスボックス（チェックボタン部分） */
div#flex-container{	/* コンテナー部分 */
	display: flex;		/* 横並びにする */
	flex-wrap: wrap;	/* コンテナ内のアイテムを折り返して表示 */
	justify-content: space-between;	/* 等間隔に並べる */
}
div#flex-container .item{		/* 各チェックボックス */
	height: 1em;
}
/* フッタ */
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>
	<!-- index.html -->
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<title>テキストボックスの文字数を得る</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">
	<p id="textLength">0</p>
	<textarea id="textBox" placeholder="文字を入力してください..."></textarea>
	<div id="flex-container">
	<div class="item"><label><input id="withoutCR" type="checkbox">改行をはぶく</label></div>
	<div class="item"><label><input id="withoutSpace" type="checkbox">半角スペースをはぶく</label></div>
	<div class="item"><label><input id="withoutByteSpace" type="checkbox">全角スペースをはぶく</label></div>
	</div>
	</div>

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

	var textBox = null; // テキストボックス
	var textLength = null; // テキストボックス内の文字数表示部分
	var withoutCR = null; // チェックボックス - 改行をはぶく
	var withoutSpace = null; // チェックボックス - 半角スペースをはぶく
	var withoutByteSpace = null; // チェックボックス - 全角スペースをはぶく

	/*
	* keyHandler: テキストボックス内の文字を表示する関数
	*/
	function keyHandler(){
	// テキストボックスの文字列を取得
	let textValue = textBox.value;

	// チェックボックスの状態を取得
	let noCR = withoutCR.checked;
	let noSpace = withoutSpace.checked;
	let noByteSpace = withoutByteSpace.checked;

	// チェックボックスの状態によって数え方を変える
	if(noCR){
	textValue = textValue.replace(/\n/g, ""); // 改行をはぶく
	}
	if(noSpace){
	textValue = textValue.replace(/ /g, ""); // 半角スペースをはぶく
	}
	if(noByteSpace){
	textValue = textValue.replace(/　/g, ""); // 全角スペースをはぶく
	}

	// 文字数を取得して表示
	let n = textValue.length;
	textLength.innerHTML = n + " 文字";
	}

	/*
	* 起動時の処理
	*/
	window.onload = function(){
	// DOM取得
	textBox = document.getElementById("textBox"); // テキストボックス
	textLength = document.getElementById("textLength"); // 文字数表示部分
	withoutCR = document.getElementById("withoutCR"); // チェックボックス（改行をはぶく）
	withoutSpace = document.getElementById("withoutSpace"); // チェックボックス（半角スペースをはぶく）
	withoutByteSpace = document.getElementById("withoutByteSpace"); // チェックボックス（全角スペースをはぶく）

	// イベント設定（いずれのイベントもkeyHandlerを呼び出して文字表示を行っている）
	textBox.addEventListener("keyup", keyHandler, false); // テキストボックス内でキーを離したとき
	textBox.addEventListener("paste", function(){ // テキストボックス内で貼り付けをしたとき
	setTimeout(keyHandler, 100); // Ctrl+V, マウス右クリック+貼り付け双方に対応
	}, false);
	withoutCR.addEventListener("click", keyHandler, false); // チェックボックスをクリックしたとき
	withoutSpace.addEventListener("click", keyHandler, false);
	withoutByteSpace.addEventListener("click", keyHandler, false);

	// テキストボックスの文字数を表示
	keyHandler();
	}
	/* 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 h2{
	font-size: 17pt;
	font-weight: 600;
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
	}
	div#contents p{
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
	}
	div#contents textarea{
	width: 100%;
	height: 10em;
	color: #000;
	border: solid 1px #ddd;
	}
	div#contents label{
	font-size: 0.8em;
	}
	div#contents input[type="checkbox"]{
	margin-right: 0.5em;
	}
	/* フレックスボックス（チェックボタン部分） */
	div#flex-container{ /* コンテナー部分 */
	display: flex; /* 横並びにする */
	flex-wrap: wrap; /* コンテナ内のアイテムを折り返して表示 */
	justify-content: space-between; /* 等間隔に並べる */
	}
	div#flex-container .item{ /* 各チェックボックス */
	height: 1em;
	}
	/* フッタ */
	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;
	}
	}