Cartman0/KeyboardEventTest.html

## KeyboardEventTest.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Keyboard Event Test</title>
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
    <style>
      html, body {
        font-family: 'Noto Sans Japanese', sans-serif;
      }

      #click-space {
        width: 20rem;
        height: 10rem;
        border: .1rem solid #333;
        border-radius: .3rem;
      }

      p {
        margin: .5rem 0;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Click Test</h1>
    </header>

    <main>
      <input type="text" id="input-text">
      <button id="btn-reset">reset</button>
      <div id="msg">
      </div>
    </main>

      <script>
        window.onload = function(){
          var input = document.getElementById('input-text');
          var msg = document.getElementById('msg');

          // MouseEvent
          (function() {
            input.addEventListener('keydown', keyDown);
            function keyDown(event) {
              msg.appendChild(createP('keydown'));
              console.log('keydown');
              console.log(event);
            }

            input.addEventListener('keyup', keyUp);
            function keyUp(event) {
              msg.appendChild(createP('keyup'));
              console.log('keyup');
              console.log(event);
            }

            input.addEventListener('keypress', keypress);
            function keypress(event) {
              msg.appendChild(createP('keypress'));
              console.log('keypress');
              console.log(event);
            }

            function createP(inner){
              var p = document.createElement('p');
              p.innerHTML = inner;
              return p;
            }
          })();

          // Reset
          (function() {
            var btn = document.getElementById('btn-reset');
            btn.addEventListener('click', function(event){
              input.value = '';
              removeEverything(msg);
            });

            function removeEverything(element) {
              while (element.firstChild) {
                element.firstChild.remove();
              }
            }
          })();
        };
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Keyboard Event Test</title>
	<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
	<style>
	html, body {
	font-family: 'Noto Sans Japanese', sans-serif;
	}

	#click-space {
	width: 20rem;
	height: 10rem;
	border: .1rem solid #333;
	border-radius: .3rem;
	}

	p {
	margin: .5rem 0;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Click Test</h1>
	</header>

	<main>
	<input type="text" id="input-text">
	<button id="btn-reset">reset</button>
	<div id="msg">
	</div>
	</main>

	<script>
	window.onload = function(){
	var input = document.getElementById('input-text');
	var msg = document.getElementById('msg');

	// MouseEvent
	(function() {
	input.addEventListener('keydown', keyDown);
	function keyDown(event) {
	msg.appendChild(createP('keydown'));
	console.log('keydown');
	console.log(event);
	}

	input.addEventListener('keyup', keyUp);
	function keyUp(event) {
	msg.appendChild(createP('keyup'));
	console.log('keyup');
	console.log(event);
	}

	input.addEventListener('keypress', keypress);
	function keypress(event) {
	msg.appendChild(createP('keypress'));
	console.log('keypress');
	console.log(event);
	}

	function createP(inner){
	var p = document.createElement('p');
	p.innerHTML = inner;
	return p;
	}
	})();

	// Reset
	(function() {
	var btn = document.getElementById('btn-reset');
	btn.addEventListener('click', function(event){
	input.value = '';
	removeEverything(msg);
	});

	function removeEverything(element) {
	while (element.firstChild) {
	element.firstChild.remove();
	}
	}
	})();
	};
	</script>
	</body>
	</html>