正文 

当前位置： 首页 > 源码 >

html 网页中的表情符号选择器

     2023-04-18     112

关键词：

【中文标题】html 网页中的表情符号选择器【英文标题】：Emoji selector in html webpage 【发布时间】：2021-04-18 01:05:29 【问题描述】：

我用 socket.io 制作了一个实时聊天网页，发现如果还可以有一个表情符号选择器按钮来显示表情符号列表，那就太酷了，就像你可以使用“windows 键 + . 句号”一样，只是一个可以显示类似标签的按钮。

我是否需要使用任何 API，或者是否只需要一个手动功能，但在单击按钮时将所有可用的表情符号复制到选项卡中。至少，有什么最简单的方法可以做到这一点吗？

然后，当单击“微笑 emojj”时，我希望它显示一个带有所有表情符号的 div，例如：

【问题讨论】：

【参考方案1】：

这是一个非常简单的版本，但您可以尝试类似的方法。我只是将here 中的几个表情符号复制并粘贴到 HTML 中，然后使用一些 JS 将它们添加到输入的末尾。如果您想更高级，可以尝试在单击表情符号并将其插入光标之后而不是值的末尾时使其不失去焦点。

function addEmoji(emoji) 
  let inputEle = document.getElementById('input');
  
  input.value += emoji;


function toggleEmojiDrawer() 
  let drawer = document.getElementById('drawer');
  
  if (drawer.classList.contains('hidden')) 
    drawer.classList.remove('hidden');
   else 
    drawer.classList.add('hidden');
  

.emoji-drawer 
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    width: 100px;

    margin-bottom: 32px;
    transition: opacity 0.2s;


.hidden 
  opacity: 0;


.emoji 
    text-align: center;
    font-size: 24px;
    padding: 8px;


.emoji:hover 
    cursor: pointer;

<button onclick="toggleEmojiDrawer()">Emojis</button>

<div id="drawer" class="emoji-drawer hidden"> 
  <div class="emoji" onclick="addEmoji(this.innerHTML)">?</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">?</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">?</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">?</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">?</div>
</div>

<input id="input" placeholder="Text goes here">

【讨论】：

有没有办法在点击按钮时弹出表情符号？ 是的，检查我的编辑。如果您最终添加更多表情符号并且不希望它占用空间，请考虑制作是一个绝对定位的元素。

使用 Swift 的 iOS 聊天应用程序中的表情符号视图

】使用Swift的iOS聊天应用程序中的表情符号视图【英文标题】：EmojiviewiniOSchatapplicationusingSwift【发布时间】：2018-01-2905:05:39【问题描述】：我正在开发聊天应用程序，我需要在按钮选择上显示表情符号视图。所以我可以在短信中... 查看详情

如何防止 Unicode 字符在 JavaScript 中呈现为 HTML 中的表情符号？

】如何防止Unicode字符在JavaScript中呈现为HTML中的表情符号？【英文标题】：HowtopreventUnicodecharactersfromrenderingasemojiinHTMLfromJavaScript?【发布时间】：2015-12-3103:43:01【问题描述】：我正在为来自FileFormat.Info\'ssearch的特殊字符查找Unicode... 查看详情

表情符号（表情）视图/键盘布局的实现

...ook应用和GoogleHangouts应用上实现的。我查看了AndroidAPI示例中的SoftKeyboard演示应用程序，但这些表情符号视图的显示看起来不像Soft 查看详情

网页中的 Opentype 字体没有重音符号

】网页中的Opentype字体没有重音符号【英文标题】：Opentypefontinwebpagewithoutaccents【发布时间】：2013-09-0506:07:24【问题描述】：我正在尝试使用NeoTechBlack字体在我的网页中使用重音符号，但它在这里不起作用。我打开.otf文件，我真... 查看详情

html基础（选择器，font属性）

...ml为基础css主要设置的就是html标签中的属性样式，css进行网页布局。 css语法选择器{属性：值,属性：值} css选择器 基本选择器*{margin:0;padding:0}网页中所以的标配都可以用p{font-size:2px}标签选择器.input{background：# 查看详情

sh超级微调器：一个基于表情符号的微调器用于bash(代码片段)

查看详情

jquery选择器(代码片段)

本节我们来学习jQuery中的选择器，选择器是jQuery库中最重要的部分之一。jQuery选择器jQuery选择器允许我们选取和操作HTML元素，它用于根据HTML元素的名称、ID、类、类型、属性和属性值等来查找HTML元素。除了基于现有的CSS... 查看详情

关于选择器的整理

...常见，最易理解的选择器，元素选择器选择匹配选择器的网页上的任何HTML元素，不考虑这些元素在文档中的位置；　　2、类选择器　元素选择器的目标是一个元素的每个实例，而选择器可以用于选择某个有class属性的任何HTML元... 查看详情

emoji纸飞机表情符号怎么输入

参考技术Aemoji纸飞机表情符号输入方法：1、打开插入菜单，选择“符号（s）”项；2、打开后在符号栏的字体选择框里选择“Wingdings”字体；3、然后选择插入就是可以了。表情符号（Emoji）类似图像或图标，但它们并不是。它们... 查看详情

css-选择器

...明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。（二）选择器的类型   1.标签选择器     标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<ht 查看详情

单词列表python不和谐中的表情符号

】单词列表python不和谐中的表情符号【英文标题】：Emojiinwordlistpythondiscord【发布时间】：2021-12-2315:47:32【问题描述】：我希望我的不和谐机器人在有人输入单词或句子时发送消息。但是，该句子包含一个表情符号。如何让机器... 查看详情

初入web知识点

...（七种）①元素选择器（类型选择器）选择匹配选择器的网页上的任何HTML元素，不考虑这些元素在文档树中的位置。目标是一个元素的每个实例。②类选择器（类名｛属性:值；｝）被用于选择有某个class属性的任何HTML元素，不... 查看详情

网页开发学习笔记三:html选择器

选择器是一个选择标签的过程标签选择器　　标签{属性:值;属性:值;}<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Document</title><styletype="text/css">/*样式表内容*/div{font-size:50px;colo 查看详情

字体真棒：我的电脑上的表情符号看起来与实际网页上的不同

】字体真棒：我的电脑上的表情符号看起来与实际网页上的不同【英文标题】：Font-awesome:Anemoticonlooksdifferentonmycomputerthanontheactualwebpage【发布时间】：2015-07-2904:35:09【问题描述】：我正在尝试在我的网页上添加来自academicons的Resea... 查看详情

css的选择器

一、css介绍　　css：层叠样式表，用于美化网页；使用css，可以将html页面的内容和样式分开，让结构更加健壮，就像一棵树，枝干分明，才能茁壮成长。开发中，往往html和css（外部样式表）文件分开，再通过link引用css文件，这... 查看详情

VS Code Windows 7 中的彩色表情符号

】VSCodeWindows7中的彩色表情符号【英文标题】：ColoredemojiinVSCodeWindows7【发布时间】：2021-12-2004:45:30【问题描述】：我正在拼命尝试在VSCode中显示彩色表情符号，但这是不可能的。我使用的是Windows7，表情符号以黑白显示。我尝试... 查看详情

javascript-选择器dom

HTMLDOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjectModel）。HTMLDOM模型被构造为对象的树。HTMLDOM树通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。JavaScript能够改变页面... 查看详情

css选择器

...明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。1<!DOCTYPEHTML>2<html>3<head>4<metahttp-equiv 查看详情