左侧的表情符号符号和左侧的表情符号框也使用插件

Question

我正在开发一个新的聊天机器人。在此，我创建了输入，就像 WhatsApp web 一样。我在输入标签前遇到表情符号时遇到麻烦。

我的代码如下

$("#mytext").emojioneArea({
  pickerPosition: "bottom"
});

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.js"></script>
<div>
  <input type="text" id="mytext" />
</div>

我正在尝试构建这种类型的输入

表情符号面板从上面的笑脸打开

Answer 1

我会做伪代码，但如果你要离开 javascript，其中创建了 html，那么你可以这样做：

.emojionearea{
  margin-left: 25px;
  position: relative;
  width: 300px;
}

.emojionearea-button{
  position: absolute;
  left: -30px;
}

https://jsfiddle.net/d9gsvjrq/

左侧的表情符号符号和左侧的表情符号框也使用插件

Emoji symbol at left and emoji box also left side using plugin

html

css

jquery

emoji