mainyaa/jsbin.girosehu.html

## jsbin.girosehu.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" media="all" href="http://marianoguerra.github.io/json.human.js/css/json.human.css" />
  <link rel="stylesheet" media="all" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.min.js"></script>
  <script src="http://marianoguerra.github.io/json.human.js/lib/crel.js"></script>
  <script src="http://marianoguerra.github.io/json.human.js/src/json.human.js"></script>
  <script type="text/javascript" src="http://marianoguerra.github.io/json.human.js/src/json.human.js"></script>
</head>
<body style="font-size:10px">
  <input type="text" id="text" style="position:fixed;top: 0;width:180px;"/>
  <div id="result" style="margin-top: 30px;position:relative; width: 100%;"></div>
  <button id="clear" style="position:fixed;top:0; left: 200px;">clear</button>
  <script type="application/javascript">
    var text = $("#text");
    var result = $("#result");
    var clear = $("#clear");
    /*
     * return a copy of an object with only non-object keys
     * we need this to avoid circular references
     */
    function simpleKeys (original) {
      return Object.keys(original).reduce(function (obj, key) {
        obj[key] = typeof original[key] === 'object' ? '{ ... }' : original[key];
        return obj;
      }, {});
    };
    function clearAction(event){
      result[0].innerHTML = "";
    }
    function keyEvent(event){
      var node = JsonHuman.format(simpleKeys(event));
      $(node).css({
        "position":"relative",
        "float":"left",
        "max-width":"130px",
        "margin-bottom":"20px"
      });
      result.append(node);
    }

    text[0].addEventListener("keydown", keyEvent);
    text[0].addEventListener("compositionstart", keyEvent);
    text[0].addEventListener("compositionupdate", keyEvent);
    text[0].addEventListener("compositionend", keyEvent);
    text[0].addEventListener("beforeInput", keyEvent);
    clear[0].addEventListener("click", clearAction);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<link rel="stylesheet" media="all" href="http://marianoguerra.github.io/json.human.js/css/json.human.css" />
	<link rel="stylesheet" media="all" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.css" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.min.js"></script>
	<script src="http://marianoguerra.github.io/json.human.js/lib/crel.js"></script>
	<script src="http://marianoguerra.github.io/json.human.js/src/json.human.js"></script>
	<script type="text/javascript" src="http://marianoguerra.github.io/json.human.js/src/json.human.js"></script>
	</head>
	<body style="font-size:10px">
	<input type="text" id="text" style="position:fixed;top: 0;width:180px;"/>
	<div id="result" style="margin-top: 30px;position:relative; width: 100%;"></div>
	<button id="clear" style="position:fixed;top:0; left: 200px;">clear</button>
	<script type="application/javascript">
	var text = $("#text");
	var result = $("#result");
	var clear = $("#clear");
	/*
	* return a copy of an object with only non-object keys
	* we need this to avoid circular references
	*/
	function simpleKeys (original) {
	return Object.keys(original).reduce(function (obj, key) {
	obj[key] = typeof original[key] === 'object' ? '{ ... }' : original[key];
	return obj;
	}, {});
	};
	function clearAction(event){
	result[0].innerHTML = "";
	}
	function keyEvent(event){
	var node = JsonHuman.format(simpleKeys(event));
	$(node).css({
	"position":"relative",
	"float":"left",
	"max-width":"130px",
	"margin-bottom":"20px"
	});
	result.append(node);
	}

	text[0].addEventListener("keydown", keyEvent);
	text[0].addEventListener("compositionstart", keyEvent);
	text[0].addEventListener("compositionupdate", keyEvent);
	text[0].addEventListener("compositionend", keyEvent);
	text[0].addEventListener("beforeInput", keyEvent);
	clear[0].addEventListener("click", clearAction);
	</script>
	</body>
	</html>