Question

通过单击按钮，所有值都正确显示，但是当我使用键事件（即textarea上的ENTER键）发送数据时，则不显示数据。我试过下面的代码，但它只是显示空的div。这是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>

Answer 1

由于您正在使用emojioneArea，因此应使用emojioneArea库随附的 getText() 和 setText() 方法。

这里是一个小提琴：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('');
}

数据未提取到在文本区域上按Enter键

1 个答案: