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

时间:2019-08-02 17:27:36

标签: jquery html css emoji

我正在开发一个新的聊天机器人。在此,我就像WhatsApp Web一样被创建输入。我很难在输入标签前加上表情符号。

我的代码在下面

<html>
<head>
<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>

</head>
<body>
<div>
<input type="text" id="mytext" />
</div>
</body>
<script>
$("#mytext").emojioneArea({
pickerPosition:"bottom"
});
</script>
</html>

我正在尝试构建此类输入

input style

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

emoji also open left side

1 个答案:

答案 0 :(得分:2)

我会执行伪代码,但是如果您要使用创建html的javascript,则可以执行以下操作:

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

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

https://jsfiddle.net/d9gsvjrq/