仿照qq发送表情的js

在Web开发中，实现类似QQ发送表情的功能通常涉及到以下几个步骤和技术点：

基础概念

表情符号（Emoji）：Emoji是一种用于表示情感或物体的小图标，它们在数字通信中越来越普遍。
Unicode编码：大多数Emoji都是通过Unicode编码标准来表示的。
富文本编辑器：用于在网页上创建和编辑包含格式化文本（如粗体、斜体、链接等）的区域。
表情选择器：一个用户界面组件，允许用户从预定义的表情列表中选择表情。

类型

静态Emoji：预定义的图标，不可更改。
自定义Emoji：允许用户上传自己的图片作为表情。

应用场景

即时通讯应用：如QQ、微信等。
社交媒体平台：用户评论、帖子等。
论坛和社区：用户发帖和回复。

实现步骤

以下是一个简单的JavaScript示例，展示如何在网页上实现一个基本的表情发送功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emoji Sender</title>
<style>
  #emoji-picker {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
  }
  #emoji-picker button {
    width: 30px;
    height: 30px;
    margin: 5px;
    border: none;
    background: no-repeat center center;
    background-size: contain;
    cursor: pointer;
  }
</style>
</head>
<body>

<textarea id="message" rows="4" cols="50"></textarea><br>
<button onclick="showEmojiPicker()">😊</button>
<div id="emoji-picker">
  <!-- 这里可以添加更多的Emoji按钮 -->
  <button onclick="insertEmoji('😊')">😊</button>
  <button onclick="insertEmoji('😂')">😂</button>
  <button onclick="insertEmoji('👍')">👍</button>
</div>

<script>
function showEmojiPicker() {
  var picker = document.getElementById('emoji-picker');
  picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
}

function insertEmoji(emoji) {
  var textarea = document.getElementById('message');
  var start = textarea.selectionStart;
  var end = textarea.selectionEnd;
  var text = textarea.value;
  textarea.value = text.substring(0, start) + emoji + text.substring(end);
  textarea.selectionStart = textarea.selectionEnd = start + emoji.length;
  textarea.focus();
}
</script>

</body>
</html>