Q:

Data does not fetch to hitting Enter key on textarea

By clicking button all values are showing properly but when I use key event i.e ENTER Key on textarea to send the data then it's not showing the data. I have tried below code but it's just showing empty div. here is the jsfiddle Link

var messages = document.getElementById("messages");
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");

$(document).ready(function() {
  $("#textbox").emojioneArea({
    pickerPosition: "top",
    events: {
      keyup: function(editor, event) {
        if (event.which == 13) {

          if (event.shiftKey) {
            // With shift
          } else {
            event.preventDefault();
            $('#button').click();
          }
        }
      }
    }
  });
});

button.addEventListener("click", function(event) {
  var newMessage = document.createElement("div");
  newMessage.setAttribute('class', 'list');

  newMessage.innerHTML = textbox.value;
  messages.appendChild(newMessage);
  textbox.value = "";
});
.wrap {
  width: 300px;
  margin: 0 auto;
}

.chat-area {
  width: 300px;
  border: 2px solid #283747;
  margin: 0 auto;
  height: 200px;
  overflow: auto;
}

.title {
  background-color: #5D6D7E;
  color: #fff;
  font-family: verdana;
  text-align: center;
  padding: 20px 0;
}

.list {
  background-color: #34495E;
  color: #fff;
  font-family: verdana;
  list-style-type: none;
  padding: 20px 15px 20px 15px;
  margin: 10px 10px;
  border-radius: 5px;
  white-space: pre-wrap;
}

#textbox {
  width: 300px;
  height: 80px;
  font-family: cursive;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.js"></script>


<div class="wrap">
  <div class="chat-area">
    <div class="title">Chat Box</div>
    <div id="messages"></div>
  </div>
  <textarea id="textbox" type="text" placeholder="shout"></textarea>
</div>
<button id="button">send</button>

A:

Since you are using emojioneArea you should use getText() and setText() methods which comes with emojioneArea library.
Here is a fiddle: https://jsfiddle.net/2vdeLgph/
function sendMessage() {
  var newMessage = document.createElement("div");
  newMessage.setAttribute('class', 'list');
  newMessage.innerHTML = $('#textbox').data("emojioneArea").getText().trim();
  messages.appendChild(newMessage);
  $('#textbox').data("emojioneArea").setText('');
}

