chikoski · December 25, 2015 03:29
diff --git a/jsbin.atOSaNo.css b/jsbin.atOSaNo.css
 .error{
  font-weight: bold;
  color: rgb(240, 240, 240);
  background-color: rgb(240, 48, 48);
  padding: 10px;
 }
diff --git a/jsbin.atOSaNo.html b/jsbin.atOSaNo.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>押すなよ！</title>
 </head>
 <body>
  <form id="input_form">
    <input type="text" id="input" placeholder="テキストを入力してください">
  </form>
  <p id="output">
    ここがリアルタイムに更新されます。
  </p>
 </body>
 </html>
diff --git a/jsbin.atOSaNo.js b/jsbin.atOSaNo.js
 var inputElm = document.getElementById("input");
 var formElm = document.getElementById("input_form");
 
 var updateText = function(){
 var outputElm = document.getElementById("output");
 var inputText = inputElm.value;
 outputElm.textContent = inputText;
 };
 
 inputElm.onkeyup = updateText;
 
 formElm.onsubmit = function(){
 return false;
 };
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>押すなよ！</title>
	</head>
	<body>
	<form id="input_form">
	<input type="text" id="input" placeholder="テキストを入力してください">
	</form>
	<p id="output">
	ここがリアルタイムに更新されます。
	</p>
	</body>
	</html>
	var inputElm = document.getElementById("input");
	var formElm = document.getElementById("input_form");

	var updateText = function(){
	var outputElm = document.getElementById("output");
	var inputText = inputElm.value;
	outputElm.textContent = inputText;
	};

	inputElm.onkeyup = updateText;

	formElm.onsubmit = function(){
	return false;
	};