html实现一个可以发送表情,不用图片,点击表情在输入框中输入特定字符,将特殊字符转换为表情包不用图片源码
时间: 2024-05-06 22:19:13 浏览: 6
实现这个功能可以使用 Unicode 表情符号。以下是一个简单的示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表情包输入框</title>
</head>
<body>
<div>
<button onclick="insertEmoji('😀')">😀</button>
<button onclick="insertEmoji('🤔')">🤔</button>
<button onclick="insertEmoji('😂')">😂</button>
<button onclick="insertEmoji('😍')">😍</button>
</div>
<div>
<textarea id="input-box"></textarea>
</div>
<script>
function insertEmoji(emoji) {
var inputBox = document.getElementById('input-box');
// 在当前光标位置插入表情
inputBox.setRangeText(emoji, inputBox.selectionStart, inputBox.selectionEnd, 'end');
}
</script>
</body>
</html>
```
在这个示例中,我们使用了 Unicode 表情符号来代替图片。当点击按钮时,我们将相应的表情符号插入到输入框中。在 `insertEmoji()` 函数中,我们使用了 `setRangeText()` 方法来在当前光标位置插入表情。这个方法接受四个参数:要插入的文本、插入文本的起始位置、插入文本的结束位置以及插入文本的选项(在这个示例中我们使用了 `'end'`,表示在当前光标位置插入文本)。当用户输入特定字符时,我们可以使用 JavaScript 将这些字符替换为相应的表情符号。