HTML entity encoder for HTML5, CSS3, and Javascript tidbits

by ASHISH ROX

HTML

<textarea id="input" placeholder="Place your HTML here."></textarea>
<textarea id="output" placeholder="The escaped string HTML will output here."></textarea>

CSS

html, body {
    height: 100%;
    margin: 0;
}

textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 50%;
    padding: 12px;
    border: none;
    resize: none;
}
textarea:focus {
    outline: none;
    border: 6px solid #09e;
    padding: 6px;
}

JavaScript

input = document.getElementById('input');
output = document.getElementById('output');

div = document.createElement('div');
function update() {
    div.textContent = input.value;
    output.value = div.innerHTML;
}

function reverse() {
    div.innerHTML = output.value;
    input.value = div.textContent;
}

input.oninput = update;
output.oninput = reverse;



/* Select text in "output" textarea when clicked:
---------------------------------------------------------------*/

output.onclick = function() {
    this.select();
}