mwgamera · November 26, 2012 12:34
diff --git a/aa2.html b/aa2.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/ecmascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/ecmascript">
      jQuery(function($) {
        var DEFAULT_FONTSIZE = "9px";
        var boxes = $();
        var displayui = function() {
          var data, box = $("<div class='displayui'></div>")
          .css({
            display: "inline-block",
            fontSize: DEFAULT_FONTSIZE,
            margin: "4px"
          })
          .append(
            data = $("<pre></pre>"),
            $("<div></div>")
            .append(
              $("<button>Delete</button>")
              .click(function() {
                boxes = boxes.not(box);
                box.remove();
              }),
              $("<input>")
              .val("monospace")
              .on("change", function() {
                data.css("font-family", $(this).val())
              }),
              $("<input>")
              .val(DEFAULT_FONTSIZE)
              .on("change", function() {
                data.css("font-size", $(this).val())
              })
              .css({
                width: "3em",
                textAlign: "right"
              })
            )
          )
          .on("update.displayui", function(e,x) {
            data.text(x);
          });
          boxes = boxes.add(box);
          return box.appendTo($("body"));
        };
        var insevt = {
          keypress: function(e) {
            var v = $(this).val(), c = this.selectionStart;
            if (e.charCode && !e.ctrlKey && !e.altKey && !e.metaKey && v.charAt(c) !== "\n") {
              $(this).val(v.slice(0,c) + v.slice(c+1));
              this.setSelectionRange(c,c);
            }
          },
          keydown: function(e) {
            var v = $(this).val(), c = this.selectionStart;
            if (e.which === 8) {
              this.setSelectionRange(c-1, c-1);
              return false;
            }
          }
        };
        $("body")
        .append(
          $("<div></div>")
          .css({
            float: "left"
          })
          .append(
            $("<textarea id='src' spellcheck='false'></textarea>")
            .on("change cut paste drop keyup", function() {
              boxes.trigger("update.displayui", $(this).val());
            })
            .on("keydown", function(e) {
              e.which === 45 && $("#insert").trigger("click")
            }),
            $("<div></div>")
            .append(
              $("<button>New</button>")
              .click(function() {
                displayui()
                .trigger("update.displayui", $("#src").val());
              }),
              $("<button id='insert'>INS</button>")
              .data("active", false)
              .css("color", "lightgray")
              .on("click", function() {
                var active = !$(this).data("active");
                $(this)
                .data("active", active)
                .css("color", active ? "inherit" : "lightgray")
                if (active) {
                  $("#src").on(insevt);
                }
                else {
                  $("#src").off(insevt);
                }
              })
            )
          )
        );
      });
    </script>
  </head>
  <body>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/ecmascript" src="http://code.jquery.com/jquery.min.js"></script>
	<script type="text/ecmascript">
	jQuery(function($) {
	var DEFAULT_FONTSIZE = "9px";
	var boxes = $();
	var displayui = function() {
	var data, box = $("<div class='displayui'></div>")
	.css({
	display: "inline-block",
	fontSize: DEFAULT_FONTSIZE,
	margin: "4px"
	})
	.append(
	data = $("<pre></pre>"),
	$("<div></div>")
	.append(
	$("<button>Delete</button>")
	.click(function() {
	boxes = boxes.not(box);
	box.remove();
	}),
	$("<input>")
	.val("monospace")
	.on("change", function() {
	data.css("font-family", $(this).val())
	}),
	$("<input>")
	.val(DEFAULT_FONTSIZE)
	.on("change", function() {
	data.css("font-size", $(this).val())
	})
	.css({
	width: "3em",
	textAlign: "right"
	})
	)
	)
	.on("update.displayui", function(e,x) {
	data.text(x);
	});
	boxes = boxes.add(box);
	return box.appendTo($("body"));
	};
	var insevt = {
	keypress: function(e) {
	var v = $(this).val(), c = this.selectionStart;
	if (e.charCode && !e.ctrlKey && !e.altKey && !e.metaKey && v.charAt(c) !== "\n") {
	$(this).val(v.slice(0,c) + v.slice(c+1));
	this.setSelectionRange(c,c);
	}
	},
	keydown: function(e) {
	var v = $(this).val(), c = this.selectionStart;
	if (e.which === 8) {
	this.setSelectionRange(c-1, c-1);
	return false;
	}
	}
	};
	$("body")
	.append(
	$("<div></div>")
	.css({
	float: "left"
	})
	.append(
	$("<textarea id='src' spellcheck='false'></textarea>")
	.on("change cut paste drop keyup", function() {
	boxes.trigger("update.displayui", $(this).val());
	})
	.on("keydown", function(e) {
	e.which === 45 && $("#insert").trigger("click")
	}),
	$("<div></div>")
	.append(
	$("<button>New</button>")
	.click(function() {
	displayui()
	.trigger("update.displayui", $("#src").val());
	}),
	$("<button id='insert'>INS</button>")
	.data("active", false)
	.css("color", "lightgray")
	.on("click", function() {
	var active = !$(this).data("active");
	$(this)
	.data("active", active)
	.css("color", active ? "inherit" : "lightgray")
	if (active) {
	$("#src").on(insevt);
	}
	else {
	$("#src").off(insevt);
	}
	})
	)
	)
	);
	});
	</script>
	</head>
	<body>
	</body>
	</html>