在 textarea 底部显示 emojionearea 表情符号容器

Question

我刚刚将 emojionearea.js 应用到我的文本区域，但表情符号显示在我的文本区域的顶部，对用户隐藏了它的视图。

我想知道如何将其容器定位到我的文本区域的底部。

我的代码：

$(document).ready(function() {
  $(".emoji_act").emojioneArea({
    emojiPlaceholder: ":smile_cat:",
    searchPlaceholder: "Search",
    buttonTitle: "Use your TAB key to insert emoji faster",
    searchPosition: "bottom",
  });
});

<link href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css" rel="stylesheet" />
<div class="container-fluid pt-3">
  <form method="POST" action="" enctype="multipart/form-data">
    <div class="form-group">
      <font color="#a1a1a1"><span id="count"></span> characters remaining</font>
      <textarea type="text" name="bio" class="form-control emoji_act" id="bio" placeholder="10 - 140 characters" onkeyup="count_char(this, 140)"></textarea>
      <span id="bio_val"></span>
    </div>
    <div class="form-group">
      <button id="ok_but" class="btn btn-primary btn-block" type="submit" name="ed_submit">
          Done
         </button>
    </div>
  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>

Answer 1

为了学习如何使用这个js库，请关注this document。

现在让我们解决您当前的问题：

您可以在传递给 emojioneArea jquery 函数的初始配置中将属性 pickerPosition 设置为 bottom。

$(document).ready(function() {
  $(".emoji_act").emojioneArea({
    emojiPlaceholder: ":smile_cat:",
    searchPlaceholder: "Search",
    buttonTitle: "Use your TAB key to insert emoji faster",
    searchPosition: "bottom",
    pickerPosition: "bottom"
  });
});

<link href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css" rel="stylesheet" />
<div class="container-fluid pt-3">
  <form method="POST" action="" enctype="multipart/form-data">
    <div class="form-group">
      <font color="#a1a1a1"><span id="count"></span> characters remaining</font>
      <textarea type="text" name="bio" class="form-control emoji_act" id="bio" placeholder="10 - 140 characters" onkeyup="count_char(this, 140)"></textarea>
      <span id="bio_val"></span>
    </div>
    <div class="form-group">
      <button id="ok_but" class="btn btn-primary btn-block" type="submit" name="ed_submit">
          Done
         </button>
    </div>
  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>

在 textarea 底部显示 emojionearea 表情符号容器

Displaying emojionearea emoji container at the bottom of textarea

javascript

jquery

emojione