south-str · December 4, 2014 05:48
diff --git a/style.css b/style.css
 @charset "utf-8";

 @font-face {
  font-family: mplus-1m-regular;
  src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1m-regular.ttf')
       format("truetype");
 }

 /* Color scheme at Solarized
  base03:  #002b36;
  base02:  #073642;
  base01:  #586e75;
  base00:  #657b83;
  base0:   #839496;
  base1:   #93a1a1;
  base2:   #eee8d5;
  base3:   #fdf6e3;
  yellow:  #b58900;
  orange:  #cb4b16;
  red:     #dc322f;
  magenta: #d33682;
  violet:  #6c71c4;
  blue:    #268bd2;
  cyan:    #2aa198;
  green:   #859900;
 */

 :root {
  background: #fdf6e3;
 }

 /* !container */
 div#container {
  padding: 5px;
  background: #002b36;
  border-radius: 5px;
 }
 /* !output */
 div#output {
  height: 390px;
  width: 100%;
  margin: auto;
  background: #002b36;
  overflow: auto;
 }

 div > p {
  color: #839496;
  margin: auto;
  /*word-break: normal;*/
  /*text-wrap: normal;*/
  word-wrap: break-word;
  font-family: mplus-1m-regular;
 }

 div > pre {
  color: #839496;
  margin: auto;
  font-family: mplus-1m-regular;
 }


 /* !input */
 form#input {
  width: 100%;
  margin: auto;
 }

 form#input > p {
  width: 100%;
  margin: auto;
  background: #002b36;
 }

 form#input > p:before {
  font-weight: bold;
  color: #839496;
  content: "\00BB\00A0";
 }

 input#line {
  width: 97%;
  height: 2rem;
  padding-left: 5px;
  padding-right: 5px;
  color: #93a1a1;
  border: gray 0px solid;
  background: #073642;
  border-radius: 5px;
  font-family: mplus-1m-regular;
 }

 input#line:focus {
  outline: none;
 }

 input#line::-webkit-input-placeholder {
  color: #586e75;
 }

 input#line:-ms-input-placeholder {
  color: #586e75;
 }

 input#line::-moz-placeholder {
  color: #586e75;
 }

 input#line:placeholder-shown {
  color: #586e75;
 }
diff --git a/textIO.html b/textIO.html
 <!DOCTYPE>
 <html>
 <head>
  <title>textIO</title>
  <link rel="stylesheet" href="style.css" type="text/css">
  <script type="text/javascript" src="textIOUtil.js"></script>
  <script type="text/javascript" src="textIO.js"></script>
 </head>
 <body>
 <div id="container">
  <div id="output"></div>
  <form id="input">
    <p><input type="text" id="line" autocomplete="off" placeholder="input commands" autofocus="true"></p>
  </form>
 </div>
 </body>
 </html>
diff --git a/textIO.js b/textIO.js
 (function(){
  window.addEventListener("load", function(){
    var line = document.getElementById("line");
    line.addEventListener('keydown', function(event){
      var
        code = event.keyCode,
        which = event.which;
      if(code == 13 || which == 13){ /*DOM_VK_RETURN*/
        //enterが押下された時の処理
        var
          output = document.getElementById("output"),
          pre = document.createElement("pre"),
          inputText = line.value;
        pre.textContent = util.returnAlways(inputText);
        output.appendChild(pre);
        output.scrollTop = output.scrollHeight; //最下部へoutputスクロール
        line.value = ""; //inputフィールドのクリア
        event.preventDefault(); //submit中断
      }
    ;}, false);
  });
 })();
diff --git a/textIOUtil.js b/textIOUtil.js
 (function(){
  var root = this;
  root.util = {};
  
  util.returnAlways = function(x){
    return x;
  };
  
 }).call(this);
	@charset "utf-8";

	@font-face {
	font-family: mplus-1m-regular;
	src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1m-regular.ttf')
	format("truetype");
	}

	/* Color scheme at Solarized
	base03: #002b36;
	base02: #073642;
	base01: #586e75;
	base00: #657b83;
	base0: #839496;
	base1: #93a1a1;
	base2: #eee8d5;
	base3: #fdf6e3;
	yellow: #b58900;
	orange: #cb4b16;
	red: #dc322f;
	magenta: #d33682;
	violet: #6c71c4;
	blue: #268bd2;
	cyan: #2aa198;
	green: #859900;
	*/

	:root {
	background: #fdf6e3;
	}

	/* !container */
	div#container {
	padding: 5px;
	background: #002b36;
	border-radius: 5px;
	}
	/* !output */
	div#output {
	height: 390px;
	width: 100%;
	margin: auto;
	background: #002b36;
	overflow: auto;
	}

	div > p {
	color: #839496;
	margin: auto;
	/word-break: normal;/
	/text-wrap: normal;/
	word-wrap: break-word;
	font-family: mplus-1m-regular;
	}

	div > pre {
	color: #839496;
	margin: auto;
	font-family: mplus-1m-regular;
	}


	/* !input */
	form#input {
	width: 100%;
	margin: auto;
	}

	form#input > p {
	width: 100%;
	margin: auto;
	background: #002b36;
	}

	form#input > p:before {
	font-weight: bold;
	color: #839496;
	content: "\00BB\00A0";
	}

	input#line {
	width: 97%;
	height: 2rem;
	padding-left: 5px;
	padding-right: 5px;
	color: #93a1a1;
	border: gray 0px solid;
	background: #073642;
	border-radius: 5px;
	font-family: mplus-1m-regular;
	}

	input#line:focus {
	outline: none;
	}

	input#line::-webkit-input-placeholder {
	color: #586e75;
	}

	input#line:-ms-input-placeholder {
	color: #586e75;
	}

	input#line::-moz-placeholder {
	color: #586e75;
	}

	input#line:placeholder-shown {
	color: #586e75;
	}
	<!DOCTYPE>
	<html>
	<head>
	<title>textIO</title>
	<link rel="stylesheet" href="style.css" type="text/css">
	<script type="text/javascript" src="textIOUtil.js"></script>
	<script type="text/javascript" src="textIO.js"></script>
	</head>
	<body>
	<div id="container">
	<div id="output"></div>
	<form id="input">
	<p><input type="text" id="line" autocomplete="off" placeholder="input commands" autofocus="true"></p>
	</form>
	</div>
	</body>
	</html>
	(function(){
	window.addEventListener("load", function(){
	var line = document.getElementById("line");
	line.addEventListener('keydown', function(event){
	var
	code = event.keyCode,
	which = event.which;
	if(code == 13 \|\| which == 13){ /DOM_VK_RETURN/
	//enterが押下された時の処理
	var
	output = document.getElementById("output"),
	pre = document.createElement("pre"),
	inputText = line.value;
	pre.textContent = util.returnAlways(inputText);
	output.appendChild(pre);
	output.scrollTop = output.scrollHeight; //最下部へoutputスクロール
	line.value = ""; //inputフィールドのクリア
	event.preventDefault(); //submit中断
	}
	;}, false);
	});
	})();
	(function(){
	var root = this;
	root.util = {};

	util.returnAlways = function(x){
	return x;
	};

	}).call(this);