Chat Textbox

by Jhim Preston

HTML

<style>
.emoji{
  margin-left:4px;
  margin-right:4px;
  width:25px;
  height:25px;
}
.text
{
  font-family:Roboto,Arial;
  font-size:30px;
  padding:6px;
  border:solid #336699 0.1px;
  border-radius:6px;
  width:350px;
  height:100px;
  overflow:auto;
}
 
</style>

<script src="//twemoji.maxcdn.com/2/twemoji.min.js?11.0"></script>
<div id="textbox" class="text" contenteditable="true" onkeydown="key();" onkeyup="key();"></div>

<div id="caritas" class="text" style="height:auto;background:#f2f2f2"></div>

<script>

text=document.getElementById('textbox')

function key()
{ twemoji.parse(text); }
key();

function caritas()
{
var i;

for(i=600;i<=644;i++)
{
caritas= document.getElementById('caritas');
caritas.innerHTML = caritas.innerHTML + '<img draggable="false" class="emoji" alt="🙄" src="https://twemoji.maxcdn.com/2/72x72/1f'+i+'.png" onclick="emo(\''+i+'\')">';
}
}
caritas();

function emo(s)
{
text.innerHTML += 
'<img draggable="false" class="emoji" alt="🙄" src="https://twemoji.maxcdn.com/2/72x72/1f'+s+'.png">';

}

</script>