构建可定制的表情选择器组件

  Java   14分钟   1031浏览   5评论

HTMLJavaScript

你好呀，我是小邹。

概述

在当今的交互式Web应用中，表情符号（Emoji）已成为一种流行的沟通方式。为了提升用户体验并简化开发流程，本教程将引导您如何构建一个可高度定制的表情选择器组件。此组件将允许用户在Web表单中快速插入表情符号，并且可以通过JavaScript进行高度配置和扩展。

效果图

img_1722275363191

技术栈

  • HTML：用于构建页面结构。
  • CSS：用于美化界面和实现响应式布局。
  • JavaScript：用于处理用户交互和动态内容生成。

页面结构

首先，我们需要为表情选择器组件定义基本的HTML结构。这里包含了一个按钮触发器、一个表情选择器面板和一个文本输入区域。

<div>
    <button style="background:none">
        <svg data-v-88c34aa9="" t="1716283029251" class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg" p-id="2631" width="50px" height="45px" id="emoji-button">
           <path data-v-88c34aa9=""
               d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" fill="#272536"
               p-id="2632">
            </path>
            <path data-v-88c34aa9=""
                d="M807.273469 216.727043c-162.808016-162.836669-427.736874-162.836669-590.544891 0-162.836669 162.806993-162.836669 427.736874 0 590.543867 162.808016 162.837692 427.737898 162.837692 590.544891 0C970.110137 644.462894 970.110137 379.534036 807.273469 216.727043M764.893242 764.92036c-139.444912 139.443889-366.370225 139.414213-505.798764 0-139.459239-139.473565-139.459239-366.354875 0-505.827417 139.428539-139.429563 366.354875-139.460262 505.798764 0C904.336108 398.521482 904.336108 625.476471 764.893242 764.92036" fill="#231F20" p-id="2633">
            </path>
            <path data-v-88c34aa9=""
                d="M381.724423 468.02137c24.783453 0 44.953841-20.169365 44.953841-44.967144 0-24.828478-20.170388-45.027519-44.953841-45.027519-24.842805 0-45.013193 20.199041-45.013193 45.027519C336.71123 447.852004 356.881618 468.02137 381.724423 468.02137" fill="#231F20" p-id="2634">
            </path>
            <path data-v-88c34aa9=""
                d="M640.680243 468.095048c24.812105 0 45.010123-20.213367 45.010123-45.01217 0-24.827455-20.198018-44.99682-45.010123-44.99682-24.785499 0-44.953841 20.169365-44.953841 44.99682C595.726401 447.88168 615.894743 468.095048 640.680243 468.095048" fill="#231F20" p-id="2635">
            </path>
            <path data-v-88c34aa9=""
                d="M642.245901 619.058294l-2.453888 0.798179c-40.310078 18.248619-83.548858 27.5341-128.411625 27.5341-46.343491 0-90.173742-9.375531-130.305765-27.799136l-2.425236-0.741897c-1.508353-0.413416-3.548826-1.003863-6.092765-1.003863-14.757099 0-26.734898 11.977799-26.734898 26.675546 0 6.978948 3.282766 13.988596 8.695033 19.253506l-0.325411 1.62501 6.831592 3.076058c47.911196 21.679765 100.021018 33.095769 150.681838 33.095769 51.608402 0 102.180194-11.120268 150.978597-33.361829 8.575306-4.703115 13.928221-13.721513 13.928221-23.511483C676.611593 627.458615 661.027663 613.290941 642.245901 619.058294"
fill="#231F20" p-id="2636">
            </path>
         </svg>
     </button>
    <div id="emoji-selector" style="display: none;height: 20%;margin-top: 10px">
          <!-- 表情按钮将在这里生成 -->
    </div>
</div>

CSS 样式

接下来，使用CSS来美化我们的组件。我们将添加一些基本的样式，包括对按钮、表情选择器面板的样式。

#emoji-selector {
        position: relative;
        display: none;
        border-radius: 5px;
        padding: 10px;
        z-index: 1;
    }

    .emoji-button-item {
        font-size: 19px; /* 控制表情的大小 */
        padding: 5px; /* 内边距 */
        margin: 2px; /* 外边距 */
        cursor: pointer; /* 鼠标指针样式 */
        border-radius: 5px; /* 圆角 */
        background: none;
    }

JavaScript 逻辑

现在，让我们添加JavaScript来处理用户交互和动态生成表情按钮。

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const emojiButton = document.getElementById('emoji-button');
        const emojiSelector = document.getElementById('emoji-selector');

        // 生成表情按钮
        function generateEmojiButtons() {
            // 参考 https://www.emojiall.com/zh-hans/all-emojis
            const emojis = [
                '😀', '😁', '😂', '😃', '😄', '😅', '😆', '😇', '😉', '😊',
                '🥳', '😋', '😎', '🤗', '🥺', '😃', '😌', '😴', '😵', '😐',
                '🙃', '🤣', '😍', '🥰', '😚', '😘', '😜', '🤔', '😏',
                '😪', '😵', '😦', '❤️', '✋', '✌️', '🤏', '🤙', '🤞', '👍','👏'
            ];
            const emojiContainer = document.getElementById('emoji-selector');
            emojis.forEach(emoji => {
                const button = document.createElement('button');
                button.className = 'emoji-button-item';
                button.textContent = emoji;
                button.addEventListener('click', function () {
                    const textarea = document.getElementById('aaa');
                    textarea.focus();
                    textarea.value += emoji;
                    // 阻止点击事件冒泡到父元素，避免关闭表情选择器
                    event.stopPropagation();
                });
                emojiContainer.appendChild(button);
            });
        }

        // 初始化表情选择器
        generateEmojiButtons();

        // 当点击表情按钮时显示或隐藏表情选择器
        emojiButton.addEventListener('click', function () {
            emojiSelector.style.display = emojiSelector.style.display === 'none' ? 'block' : 'none';
        });

        // 当点击文档其他地方时隐藏表情选择器
        window.addEventListener('click', function (event) {
            if (!emojiSelector.contains(event.target) && event.target !== emojiButton) {
                emojiSelector.style.display = 'none';
            }
        });
    });
</script>

结论

通过上述步骤，您可以构建一个功能齐全的表情选择器组件，它不仅美观而且实用。此外，该组件具有高度可定制性，可以根据您的具体需求进行扩展和调整。无论是用于聊天应用还是博客评论系统，这个组件都能提供优秀的用户体验。

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名，转载请...
最后编辑时间为: 2024/07/30 07:05:05

如果你觉得文章对你有帮助，那就请作者喝杯咖啡吧☕
微信
支付宝
😀
😃
😄
😁
😆
😅
🤣
😂
🙂
🙃
😉
😊
😇
🥰
😍
🤩
😘
😗
☺️
😚
😙
🥲
😋
😛
😜
🤪
😝
🤑
🤗
🤭
🫢
🫣
🤫
🤔
🤨
😐
😑
😶
😏
😒
🙄
😬
😮‍💨
🤤
😪
😴
😷
🤒
🤕
🤢
🤮
🤧
🥵
🥶
🥴
😵
😵‍💫
🤯
🥳
🥺
😠
😡
🤬
🤯
😈
👿
💀
☠️
💩
👻
👽
👾
🤖
😺
😸
😹
😻
😼
😽
🙀
😿
😾
👋
🤚
🖐️
✋️
🖖
🫱
🫲
🫳
🫴
🫷
🫸
👌
🤌
🤏
✌️
🤞
🫰
🤟
🤘
🤙
👈️
👉️
👆️
🖕
👇️
☝️
🫵
👍️
👎️
✊️
👊
🤛
🤜
👏
🙌
👐
🤲
🤝
🙏
✍️
💅
🤳
💪
🦾
🦿
🦵
🦶
👂
🦻
👃
👶
👧
🧒
👦
👩
🧑
👨
👩‍🦱
👨‍🦱
👩‍🦰
👨‍🦰
👱‍♀️
👱‍♂️
👩‍🦳
👨‍🦳
👩‍🦲
👨‍🦲
🧔‍♀️
🧔‍♂️
👵
🧓
👴
👲
👳‍♀️
👳‍♂️
🧕
👮‍♀️
👮‍♂️
👷‍♀️
👷‍♂️
💂‍♀️
💂‍♂️
🕵️‍♀️
🕵️‍♂️
👩‍⚕️
👨‍⚕️
👩‍🌾
👨‍🌾
👩‍🍳
👨‍🍳
🐶
🐱
🐭
🐹
🐰
🦊
🐻
🐼
🐨
🐯
🦁
🐮
🐷
🐸
🐵
🐔
🐧
🐦
🦅
🦉
🐴
🦄
🐝
🪲
🐞
🦋
🐢
🐍
🦖
🦕
🐬
🦭
🐳
🐋
🦈
🐙
🦑
🦀
🦞
🦐
🐚
🐌
🦋
🐛
🦟
🪰
🪱
🦗
🕷️
🕸️
🦂
🐢
🐍
🦎
🦖
🦕
🐊
🐢
🐉
🦕
🦖
🐘
🦏
🦛
🐪
🐫
🦒
🦘
🦬
🐃
🐂
🐄
🐎
🐖
🐏
🐑
🐐
🦌
🐕
🐩
🦮
🐕‍🦺
🐈
🐈‍⬛
🐓
🦃
🦚
🦜
🦢
🦩
🕊️
🐇
🦝
🦨
🦡
🦫
🦦
🦥
🐁
🐀
🐿️
🦔
🌵
🎄
🌲
🌳
🌴
🌱
🌿
☘️
🍀
🎍
🎋
🍃
🍂
🍁
🍄
🌾
💐
🌷
🌹
🥀
🌺
🌸
🌼
🌻
🌞
🌝
🌛
🌜
🌚
🌕
🌖
🌗
🌘
🌑
🌒
🌓
🌔
🌙
🌎
🌍
🌏
🪐
💫
⭐
🌟
✨
⚡
🔥
💥
☄️
☀️
🌤️
⛅
🌥️
🌦️
🌧️
⛈️
🌩️
🌨️
❄️
☃️
⛄
🌬️
💨
💧
💦
☔
🌊
🍇
🍈
🍉
🍊
🍋
🍌
🍍
🥭
🍎
🍏
🍐
🍑
🍒
🍓
🥝
🍅
🥥
🥑
🍆
🥔
🥕
🌽
🌶️
🥒
🥬
🥦
🧄
🧅
🍄
🥜
🍞
🥐
🥖
🥨
🥯
🥞
🧇
🧀
🍖
🍗
🥩
🥓
🍔
🍟
🍕
🌭
🥪
🌮
🌯
🥙
🧆
🥚
🍳
🥘
🍲
🥣
🥗
🍿
🧈
🧂
🥫
🍱
🍘
🍙
🍚
🍛
🍜
🍝
🍠
🍢
🍣
🍤
🍥
🥮
🍡
🥟
🥠
🥡
🦪
🍦
🍧
🍨
🍩
🍪
🎂
🍰
🧁
🥧
🍫
🍬
🍭
🍮
🍯
🍼
🥛
☕
🍵
🍶
🍾
🍷
🍸
🍹
🍺
🍻
🥂
🥃
🥤
🧃
🧉
🧊
🗺️
🏔️
⛰️
🌋
🏕️
🏖️
🏜️
🏝️
🏞️
🏟️
🏛️
🏗️
🏘️
🏙️
🏚️
🏠
🏡
🏢
🏣
🏤
🏥
🏦
🏨
🏩
🏪
🏫
🏬
🏭
🏯
🏰
💒
🗼
🗽
⛪
🕌
🛕
🕍
⛩️
🕋
⛲
⛺
🌁
🌃
🏙️
🌄
🌅
🌆
🌇
🌉
🎠
🎡
🎢
💈
🎪
🚂
🚃
🚄
🚅
🚆
🚇
🚈
🚉
🚊
🚝
🚞
🚋
🚌
🚍
🚎
🚐
🚑
🚒
🚓
🚔
🚕
🚖
🚗
🚘
🚙
🚚
🚛
🚜
🏎️
🏍️
🛵
🦽
🦼
🛺
🚲
🛴
🛹
🚏
🛣️
🛤️
🛢️
⛽
🚨
🚥
🚦
🚧
⚓
⛵
🛶
🚤
🛳️
⛴️
🛥️
🚢
✈️
🛩️
🛫
🛬
🪂
💺
🚁
🚟
🚠
🚡
🛰️
🚀
🛸
🧳
⌚
📱
💻
⌨️
🖥️
🖨️
🖱️
🖲️
💽
💾
📀
📼
🔍
🔎
💡
🔦
🏮
📔
📕
📖
📗
📘
📙
📚
📓
📒
📃
📜
📄
📰
🗞️
📑
🔖
🏷️
💰
💴
💵
💶
💷
💸
💳
🧾
✉️
📧
📨
📩
📤
📥
📦
📫
📪
📬
📭
📮
🗳️
✏️
✒️
🖋️
🖊️
🖌️
🖍️
📝
📁
📂
🗂️
📅
📆
🗒️
🗓️
📇
📈
📉
📊
📋
📌
📍
📎
🖇️
📏
📐
✂️
🗃️
🗄️
🗑️
🔒
🔓
🔏
🔐
🔑
🗝️
🔨
🪓
⛏️
⚒️
🛠️
🗡️
⚔️
🔫
🏹
🛡️
🔧
🔩
⚙️
🗜️
⚗️
🧪
🧫
🧬
🔬
🔭
📡
💉
🩸
💊
🩹
🩺
🚪
🛏️
🛋️
🪑
🚽
🚿
🛁
🧴
🧷
🧹
🧺
🧻
🧼
🧽
🧯
🛒
🚬
⚰️
⚱️
🗿
🏧
🚮
🚰
♿
🚹
🚺
🚻
🚼
🚾
🛂
🛃
🛄
🛅
⚠️
🚸
⛔
🚫
🚳
🚭
🚯
🚱
🚷
📵
🔞
☢️
☣️
❤️
🧡
💛
💚
💙
💜
🖤
💔
❣️
💕
💞
💓
💗
💖
💘
💝
💟
☮️
✝️
☪️
🕉️
☸️
✡️
🔯
🕎
☯️
☦️
🛐
⛎
♈
♉
♊
♋
♌
♍
♎
♏
♐
♑
♒
♓
🆔
⚛️
🉑
☢️
☣️
📴
📳
🈶
🈚
🈸
🈺
🈷️
✴️
🆚
💮
🉐
㊙️
㊗️
🈴
🈵
🈹
🈲
🅰️
🅱️
🆎
🆑
🅾️
🆘
❌
⭕
🛑
💢
💯
💠
♨️
🚷
🚯
🚳
🚱
🔞
📵
🚭
❗
❕
❓
❔
‼️
⁉️
🔅
🔆
🔱
⚜️
〽️
⚠️
🚸
🔰
♻️
✅
🈯
💹
❇️
✳️
❎
🌐
💠
Ⓜ️
🌀
💤
🏧
🚾
♿
🅿️
🈳
🈂️
🛂
🛃
🛄
🛅
  5 条评论
召田最帅boy 博主
2025-06-28 01:12
  湖南省衡阳市

优化版：https://www.hqxiaozou.top/post/wmmD4nqqh7E

（O o .）
2024-07-30 14:09
  广东省深圳市

👍