Question

我有一个满意的div聊天。我添加了一个用于向文本添加表情符号的函数。当我点击满足中的表情符号时，我希望在图像之前或之后放置插入符号。

＆＃13;

.chat-text-box img {
  width: 100%;
  height: 100%;
}

.chat-text-box emoji {
  width: 18px;
  height: 18px;
  display: inline-block;
}

＆＃13;

<div class="chat-text-box" contenteditable="true">This is a emoji:&nbsp;
  <emoji class="emoji-icon" contenteditable="false" data-emoji="&amp;#x1F605;"><img draggable="false" src="https://twemoji.maxcdn.com/2/svg/1f605.svg"></emoji>
</div>

＆＃13;

Answer 1

当文本框有::after

时，您可以使用伪元素:focus创建该插入符号

有关伪元素MDN

的更多信息

.chat-text-box img {
  width: 100%;
  height: 100%;
}

.chat-text-box emoji {
  width: 18px;
  height: 18px;
  display: inline-block;
  /* added this so you can use position: absolute on the ::after */
  position: relative;
}

.chat-text-box:focus emoji::after {
  content: '>';
  display: block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  bottom: 0;
  right: -1.5rem;
}

<div class="chat-text-box" contenteditable="true">This is a emoji:&nbsp;
  <emoji class="emoji-icon" contenteditable="false" data-emoji="&amp;#x1F605;"><img draggable="false" src="https://twemoji.maxcdn.com/2/svg/1f605.svg"></emoji>
</div>

在图像之前/之后放置插入符号

1 个答案: