Question

几个星期以来，我一直在处理表情符号问题。我一直试图使用socket.io将聊天表添加到聊天中。我试过CSS表情符号，Javascript表情符号等等。我尝试了不同的选择，但似乎没有任何效果。我有点绝望，因为虽然我试着玩不同的选择，但我没有得到＃34; smilies＆＃34;完全显示。

现在我正在使用此存储库：https://github.com/wedgies/jquery-emoji-picker 我查看了自述文件，按照示例进行操作，然后没有，再也没有工作。

这是我的HTML代码，第一个CSS是我用于socket.io

的CSS

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chat</title>
  <link rel="stylesheet" href="style.css">




<link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.emojipicker.js"></script>

  <!-- Emoji Data -->
  <link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.a.css">
  <script type="text/javascript" src="js/jquery.emojipicker.a.js"></script>

  <script type="text/javascript">
    $(document).ready(function(e) {

      $('#text-custom-trigger').emojiPicker({
        width: '300px',
        height: '200px',
        button: false
      });

      $('#input-default').emojiPicker();

      $('#input-custom-size').emojiPicker({
        width: '300px',
        height: '200px'
      });

      $('#input-left-position').emojiPicker({
        position: 'left'
      });

      $('#trigger').click(function(e) {
        e.preventDefault();
        $('#text-custom-trigger').emojiPicker('toggle');
      });

    });
  </script>

  <style type="text/css">

    #emojiPickerWrap {margin:10px 0 0 0;}
    .field { padding: 20px 0; }
    textarea { width: 400px; height: 200px; }
  </style>


</head>
<body>
  <ul class="pages">
    <li class="chat page">
      <div class="chatArea">
        <ul class="messages"></ul>
      </div>
      <input class="inputMessage" id="input-default" placeholder="¿Qué quieres decir?"/>
    </li>
    <li class="login page">
      <div class="form">
        <h3 class="title">Ingresa un nombre de usuario</h3>
        <input class="usernameInput" type="text" maxlength="14" />
      </div>
    </li>
  </ul>

  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="/main.js"></script>


</body>
</html>

我知道这很容易，并且知道这更令人沮丧。感谢您的帮助和建议。

最好的问候。

Answer 1

我没有您在开发环境中可能拥有的所有代码，但是根据您提供的内容，我能够组建一个JSFiddle，它似乎对我来说很好。 JSFiddle 这段代码似乎很好地显示了表情符号按钮 - $('#input-default').emojiPicker();

Answer 2

您的代码运行没有任何问题，请参阅下面的演示。

$(document).ready(function(e) {

  $('#text-custom-trigger').emojiPicker({
    width: '300px',
    height: '200px',
    button: false
  });

  $('#input-default').emojiPicker();

  $('#input-custom-size').emojiPicker({
    width: '300px',
    height: '200px'
  });

  $('#input-left-position').emojiPicker({
    position: 'left'
  });

  $('#trigger').click(function(e) {
    e.preventDefault();
    $('#text-custom-trigger').emojiPicker('toggle');
  });

});

#emojiPickerWrap {
  margin: 10px 0 0 0;
}
.field {
  padding: 20px 0;
}
textarea {
  width: 400px;
  height: 200px;
}

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wedgies/jquery-emoji-picker/master/css/jquery.emojipicker.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/wedgies/jquery-emoji-picker/master/js/jquery.emojipicker.js"></script>

<!-- Emoji Data -->
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wedgies/jquery-emoji-picker/master/css/jquery.emojipicker.a.css">
<script type="text/javascript" src="https://rawgit.com/wedgies/jquery-emoji-picker/master/js/jquery.emojipicker.a.js"></script>
</head>

<ul class="pages">
  <li class="chat page">
    <div class="chatArea">
      <ul class="messages"></ul>
    </div>
    <input class="inputMessage" placeholder="¿Qué quieres decir?" />
    <input type="text" id="input-default" class="emojiable-option" placeholder="Default">
  </li>
  <li class="login page">
    <div class="form">
      <h3 class="title">Ingresa un nombre de usuario</h3>
      <input class="usernameInput" type="text" maxlength="14" />
    </div>
  </li>
</ul>

如果您看到方块而不是图标，则您的操作系统没有支持这些符号的字体。例如，对于Windows 7，您需要安装更新KB2729094，有关详细信息，请参阅this article。

另外，你要包含两个jQuery库副本，删除旧的1.10.2。

Socket.IO + Emoji

2 个答案: