files/31_generatetext.html


<!DOCTYPE HTML>
<html>
<head>
<style>
head, style {display: block;}
[contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
style:first-of-type {visibility:hidden;}style:first-of-type {visibility:hidden;}style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
:root {background-color:#ccc; 
  background-image:url(../css/page-bg.jpg);}
ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
li {color: black;}
li li {color: green;}
p, pre {font-size: 2em;padding: 20px; background-color: #ccc; border-radius: 15px;}
p {}
</style>

<style contenteditable>
p:before {
	content: '';	
}
p:after {
	content: '';	
}
</style>
<title>Generate Text</title>
</head>

<body>
	<p contenteditable id="text"> are </p>
    <pre contenteditable>&lt;p&gt; <span id="textchange" contenteditable tabindex>are</span> &lt;/p&gt;</pre>
<small>Text is editable, and p has an id of text</small>    
    <script>
var curText = document.getElementById('textchange');
var showText = document.getElementById('text');
document.designMode = 'on';
document.addEventListener('keyup', function () {
	console.log('worked');
  	showText.innerHTML =  " " + curText.innerHTML + " ";
});


</script>
</body>
</html>