<header>
  <h1>TEXT / HTML</h1>
  <p>Conversión de texto a HTML</p>
</header>
  <content>
    <div id="wrapper" >
      <p>&nbsp;</p>
      <div class="input-group input-group-lg">
        <span class="input-group-addon" id="sizing-addon1">TEXTO</span>
        <input type="text" class="form-control" placeholder="Cadena de texto" aria-describedby="sizing-addon1" id="txt_texto">
      </div>
      <p>&nbsp;</p>
       <div class="input-group input-group-lg">
        <span class="input-group-addon" id="sizing-addon1">HTML</span>
        <input type="text" class="form-control" placeholder="Texto codificado" aria-describedby="sizing-addon1" id="txt_html">
      </div>
      <p>&nbsp;</p>
      <p class="text-danger" id="msgerror"></p>
    </div>
  </content>

html, body {
    font-size: 10px;
    background: #e5ebf4;
    font-family: 'Open Sans', sans-serif !important;
}

body {margin:0;}

h1 {
  position:relative;
  margin:0px auto;
  width:auto;
  padding-bottom:0px;
  font-size:4.1rem;
  font-weight:300;
  letter-spacing: -0.15rem;
  color:#FFF
}

header {
  background:#2b303b;
  text-align:center;
  padding:10px;
}
header p {color:#96b5b4;}

#wrapper {
  width : 90%;
  margin : 0px auto;
}

$("#txt_texto").keyup(function(){
  $("#txt_html").val(  Encoder.htmlEncode( $("#txt_texto").val()) );
});