Nếu bạn muốn tích hợp bảng chọn Emoji ngay tại bình luận của website, tương tự như bảng chọn Emoji của Facebook Messenger, bài viết này sẽ giúp bạn.

Tích hợp Emoji cho bình luận đơn giản với jQuery

Bài viết sử dụng Bootstrap 3 và jQuery 3.6.0 để demo (vẫn hỗ trợ jQuery 1.12.4).

Xem demo Tải về

HTML

Đầu tiên bạn cần sử dụng Bootstrap và jQuery.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Nếu bạn dùng phiên bản Bootstrap khác, vui lòng tự điều chỉnh Tabs cho đúng.

Tiếp đến là phần bình luận, bạn cần một thẻ <div></div> để bao lấy <textarea></textarea> bình luận.

<div class="comment-textarea-wrap"><textarea id="comment" rows="8"></textarea></div>

CSS

Chèn thêm CSS mình đã tạo sẵn, bạn có thể tự điều chỉnh cho vừa ý.

.comment-textarea-wrap {
	max-width: 800px;
	margin: 15% auto;
	position: relative;
}

textarea#comment {
	width: 100%;
	height: 100px;
	padding: 5px 10px;
	resize: none;
}

.emoji-panel-btn {
	position: absolute;
	right: 0;
	bottom: 5px;
	font-size: 20px;
	cursor: pointer;
	user-select: none;
	padding: 10px;
}

.emoji-panel {
	width: 300px;
	height: 350px;
	background: #fff;
	padding: 15px;
	border-radius: 7px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	position: absolute;
	z-index: 999;
	right: 0;
	top: 103px; /* Chỉnh giá trị này lại cho phù hợp với trang web của bạn */
}

.emoji-panel:after {
	top: -16px;
	right: 15px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 8px;
	margin-left: -8px;
}

@media (min-width:  768px) {
	.emoji-panel {
		right: 50px;
		bottom: -63px;
		top: auto;
	}

	.emoji-panel:after {
		top: auto;
		bottom: 80px;
		right: -16px;
		border-bottom-color: rgba(255, 255, 255, 0);
		border-left-color: #fff;
	}
}

.emoji-panel .nav-tabs li a {
	font-size: 16px;
	padding: 6px;
	user-select: none;
}

.emoji-tab {
	padding-top: 5px;
	height: 290px;
	overflow-x: hidden;
	overflow-y: scroll;
}

.emoji-tab span {
	width: 53px;
	display: inline-block;
	text-align: center;
	font-size: 24px;
	cursor: pointer;
	letter-spacing: 8px;
	line-height: 2;
	user-select: none;
}

.emoji-tab::-webkit-scrollbar {
	width: 3px;
}

.emoji-tab::-webkit-scrollbar-thumb {
	background-color: var(--theme-color);
	outline: 0;
}

JS

$('.comment-textarea-wrap').append('<span id="emoji-panel-btn" class="emoji-panel-btn">😊</span>');

$('#emoji-panel-btn').click(function(e) {
	e.stopPropagation();
	e.preventDefault();
	if (!$('.emoji-panel').is(':visible')) {
		$('.comment-textarea-wrap').append('<div class="emoji-panel"><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#e-t-1" aria-controls="e-t-1" role="tab" data-toggle="tab">😀</a></li><li role="presentation"><a href="#e-t-2" aria-controls="e-t-2" role="tab" data-toggle="tab">🦉</a></li><li role="presentation"><a href="#e-t-3" aria-controls="e-t-3" role="tab" data-toggle="tab">🥝</a></li><li role="presentation"><a href="#e-t-4" aria-controls="e-t-4" role="tab" data-toggle="tab">⚽️</a></li><li role="presentation"><a href="#e-t-5" aria-controls="e-t-5" role="tab" data-toggle="tab">🚀</a></li><li role="presentation"><a href="#e-t-6" aria-controls="e-t-6" role="tab" data-toggle="tab">🧱</a></li><li role="presentation"><a href="#e-t-7" aria-controls="e-t-7" role="tab" data-toggle="tab">💖</a></li></ul><div class="tab-content"><div role="tabpanel" class="tab-pane emoji-tab active" id="e-t-1"><span>😀</span><span>😃</span><span>😄</span><span>😁</span><span>😆</span><span>😅</span><span>😂</span><span>🤣</span><span>😊</span><span>😇</span><span>🙂</span><span>🙃</span><span>😉</span><span>😌</span><span>😍</span><span>🥰</span><span>😘</span><span>😗</span><span>😙</span><span>😚</span><span>😋</span><span>😛</span><span>😝</span><span>😜</span><span>🤪</span><span>🤨</span><span>🧐</span><span>🤓</span><span>😎</span><span>🤩</span><span>🥳</span><span>😏</span><span>😒</span><span>😞</span><span>😔</span><span>😟</span><span>😕</span><span>🙁</span><span>☹️</span><span>😣</span><span>😖</span><span>😫</span><span>😩</span><span>🥺</span><span>😢</span><span>😭</span><span>😤</span><span>😠</span><span>😡</span><span>🤬</span><span>🤯</span><span>😳</span><span>🥵</span><span>🥶</span><span>😱</span><span>😨</span><span>😰</span><span>😥</span><span>😓</span><span>🤗</span><span>🤔</span><span>🤭</span><span>🤫</span><span>🤥</span><span>😶</span><span>😐</span><span>😑</span><span>😬</span><span>🙄</span><span>😯</span><span>😦</span><span>😧</span><span>😮</span><span>😲</span><span>🥱</span><span>😴</span><span>🤤</span><span>😪</span><span>😵</span><span>🤐</span><span>🥴</span><span>🤢</span><span>🤮</span><span>🤧</span><span>😷</span><span>🤒</span><span>🤕</span><span>🤑</span><span>🤠</span><span>😈</span><span>👿</span><span>👹</span><span>👺</span><span>🤡</span><span>💩</span><span>👻</span><span>💀</span><span>☠️</span><span>👽</span><span>👾</span><span>🤖</span><span>🎃</span><span>😺</span><span>😸</span><span>😹</span><span>😻</span><span>😼</span><span>😽</span><span>🙀</span><span>😿</span><span>😾</span><span>👋</span><span>🤚</span><span>🖐</span><span>✋</span><span>🖖</span><span>👌</span><span>🤏</span><span>✌️</span><span>🤞</span><span>🤟</span><span>🤘</span><span>🤙</span><span>👈</span><span>👉</span><span>👆</span><span>🖕</span><span>👇</span><span>☝️</span><span>👍</span><span>👎</span><span>✊</span><span>👊</span><span>🤛</span><span>🤜</span><span>👏</span><span>🙌</span><span>👐</span><span>🤲</span><span>🤝</span><span>🙏</span><span>✍️</span><span>💅</span><span>🤳</span><span>💪</span><span>🦾</span><span>🦵</span><span>🦿</span><span>🦶</span><span>👣</span><span>👂</span><span>🦻</span><span>👃</span><span>🧠</span><span>🦷</span><span>🦴</span><span>👀</span><span>👁</span><span>👅</span><span>👄</span><span>💋</span><span>🩸</span><span>🧳</span><span>🌂</span><span>☂️</span><span>🧵</span><span>🧶</span><span>👓</span><span>🕶</span><span>🥽</span><span>🥼</span><span>🦺</span><span>👔</span><span>👕</span><span>👖</span><span>🧣</span><span>🧤</span><span>🧥</span><span>🧦</span><span>👗</span><span>👘</span><span>🥻</span><span>🩱</span><span>🩲</span><span>🩳</span><span>👙</span><span>👚</span><span>👛</span><span>👜</span><span>👝</span><span>🎒</span><span>👞</span><span>👟</span><span>🥾</span><span>🥿</span><span>👠</span><span>👡</span><span>🩰</span><span>👢</span><span>👑</span><span>👒</span><span>🎩</span><span>🎓</span><span>🧢</span><span>⛑</span><span>💄</span><span>💍</span><span>💼</span></div><div role="tabpanel" class="tab-pane emoji-tab" id="e-t-2"><span>🐶</span><span>🐱</span><span>🐭</span><span>🐹</span><span>🐰</span><span>🦊</span><span>🐻</span><span>🐼</span><span>🐻</span><span>🐨</span><span>🐯</span><span>🦁</span><span>🐮</span><span>🐷</span><span>🐽</span><span>🐸</span><span>🐵</span><span>🙈</span><span>🙉</span><span>🙊</span><span>🐒</span><span>🐔</span><span>🐧</span><span>🐦</span><span>🐤</span><span>🐣</span><span>🐥</span><span>🦆</span><span>🦅</span><span>🦉</span><span>🦇</span><span>🐺</span><span>🐗</span><span>🐴</span><span>🦄</span><span>🐝</span><span>🐛</span><span>🦋</span><span>🐌</span><span>🐞</span><span>🐜</span><span>🦟</span><span>🦗</span><span>🕷</span><span>🕸</span><span>🦂</span><span>🐢</span><span>🐍</span><span>🦎</span><span>🦖</span><span>🦕</span><span>🐙</span><span>🦑</span><span>🦐</span><span>🦞</span><span>🦀</span><span>🐡</span><span>🐠</span><span>🐟</span><span>🐬</span><span>🐳</span><span>🐋</span><span>🦈</span><span>🐊</span><span>🐅</span><span>🐆</span><span>🦓</span><span>🦍</span><span>🦧</span><span>🐘</span><span>🦛</span><span>🦏</span><span>🐪</span><span>🐫</span><span>🦒</span><span>🦘</span><span>🐃</span><span>🐂</span><span>🐄</span><span>🐎</span><span>🐖</span><span>🐏</span><span>🐑</span><span>🦙</span><span>🐐</span><span>🦌</span><span>🐩</span><span>🦮</span><span>🐕</span><span>🐈</span><span>🐓</span><span>🦃</span><span>🦚</span><span>🦜</span><span>🦢</span><span>🦩</span><span>🕊</span><span>🐇</span><span>🦝</span><span>🦨</span><span>🦡</span><span>🦦</span><span>🦥</span><span>🐁</span><span>🐀</span><span>🐿</span><span>🦔</span><span>🐾</span><span>🐉</span><span>🐲</span><span>🌵</span><span>🎄</span><span>🌲</span><span>🌳</span><span>🌴</span><span>🌱</span><span>🌿</span><span>☘️</span><span>🍀</span><span>🎍</span><span>🎋</span><span>🍃</span><span>🍂</span><span>🍁</span><span>🍄</span><span>🐚</span><span>🌾</span><span>💐</span><span>🌷</span><span>🌹</span><span>🥀</span><span>🌺</span><span>🌸</span><span>🌼</span><span>🌻</span><span>🌞</span><span>🌝</span><span>🌛</span><span>🌜</span><span>🌚</span><span>🌕</span><span>🌖</span><span>🌗</span><span>🌘</span><span>🌑</span><span>🌒</span><span>🌓</span><span>🌔</span><span>🌙</span><span>🌎</span><span>🌍</span><span>🌏</span><span>🪐</span><span>💫</span><span>⭐️</span><span>🌟</span><span>✨</span><span>⚡️</span><span>☄️</span><span>💥</span><span>🔥</span><span>🌪</span><span>🌈</span><span>☀️</span><span>🌤</span><span>⛅️</span><span>🌥</span><span>☁️</span><span>🌦</span><span>🌧</span><span>⛈</span><span>🌩</span><span>🌨</span><span>❄️</span><span>☃️</span><span>⛄️</span><span>🌬</span><span>💨</span><span>💧</span><span>💦</span><span>☔️</span><span>☂️</span><span>🌊</span><span>🌫</span></div><div role="tabpanel" class="tab-pane emoji-tab" id="e-t-3"><span>🍏</span><span>🍎</span><span>🍐</span><span>🍊</span><span>🍋</span><span>🍌</span><span>🍉</span><span>🍇</span><span>🍓</span><span>🍈</span><span>🍒</span><span>🍑</span><span>🥭</span><span>🍍</span><span>🥥</span><span>🥝</span><span>🍅</span><span>🍆</span><span>🥑</span><span>🥦</span><span>🥬</span><span>🥒</span><span>🌶</span><span>🌽</span><span>🥕</span><span>🧄</span><span>🧅</span><span>🥔</span><span>🍠</span><span>🥐</span><span>🥯</span><span>🍞</span><span>🥖</span><span>🥨</span><span>🧀</span><span>🥚</span><span>🍳</span><span>🧈</span><span>🥞</span><span>🧇</span><span>🥓</span><span>🥩</span><span>🍗</span><span>🍖</span><span>🦴</span><span>🌭</span><span>🍔</span><span>🍟</span><span>🍕</span><span>🥪</span><span>🥙</span><span>🧆</span><span>🌮</span><span>🌯</span><span>🥗</span><span>🥘</span><span>🥫</span><span>🍝</span><span>🍜</span><span>🍲</span><span>🍛</span><span>🍣</span><span>🍱</span><span>🥟</span><span>🦪</span><span>🍤</span><span>🍙</span><span>🍚</span><span>🍘</span><span>🍥</span><span>🥠</span><span>🥮</span><span>🍢</span><span>🍡</span><span>🍧</span><span>🍨</span><span>🍦</span><span>🥧</span><span>🧁</span><span>🍰</span><span>🎂</span><span>🍮</span><span>🍭</span><span>🍬</span><span>🍫</span><span>🍿</span><span>🍩</span><span>🍪</span><span>🌰</span><span>🥜</span><span>🍯</span><span>🥛</span><span>🍼</span><span>☕️</span><span>🍵</span><span>🧃</span><span>🥤</span><span>🍶</span><span>🍺</span><span>🍻</span><span>🥂</span><span>🍷</span><span>🥃</span><span>🍸</span><span>🍹</span><span>🧉</span><span>🍾</span><span>🧊</span><span>🥄</span><span>🍴</span><span>🍽</span><span>🥣</span><span>🥡</span><span>🥢</span><span>🧂</span></div><div role="tabpanel" class="tab-pane emoji-tab" id="e-t-4"><span>⚽️</span><span>🏀</span><span>🏈</span><span>⚾️</span><span>🥎</span><span>🎾</span><span>🏐</span><span>🏉</span><span>🥏</span><span>🎱</span><span>🪀</span><span>🏓</span><span>🏸</span><span>🏒</span><span>🏑</span><span>🥍</span><span>🏏</span><span>🥅</span><span>⛳️</span><span>🪁</span><span>🏹</span><span>🎣</span><span>🤿</span><span>🥊</span><span>🥋</span><span>🎽</span><span>🛹</span><span>🛷</span><span>⛸</span><span>🥌</span><span>🎿</span><span>⛷</span><span>🏂</span><span>🪂</span><span>🏋️</span><span>🏋️</span><span>🤼</span><span>🤸</span><span>⛹️</span><span>🤺</span><span>🤾</span><span>🏌️</span><span>🏇</span><span>🧘</span><span>🏄</span><span>🏊</span><span>🤽</span><span>🚣</span><span>🧗</span><span>🚵</span><span>🚴</span><span>🏆</span><span>🥇</span><span>🥈</span><span>🥉</span><span>🏅</span><span>🎖</span><span>🏵</span><span>🎗</span><span>🎫</span><span>🎟</span><span>🎪</span><span>🤹</span><span>🎭</span><span>🩰</span><span>🎨</span><span>🎬</span><span>🎤</span><span>🎧</span><span>🎼</span><span>🎹</span><span>🥁</span><span>🎷</span><span>🎺</span><span>🎸</span><span>🪕</span><span>🎻</span><span>🎲</span><span>♟</span><span>🎯</span><span>🎳</span><span>🎮</span><span>🎰</span><span>🧩</span></div><div role="tabpanel" class="tab-pane emoji-tab" id="e-t-5"><span>🚗</span><span>🚕</span><span>🚙</span><span>🚌</span><span>🚎</span><span>🏎</span><span>🚓</span><span>🚑</span><span>🚒</span><span>🚐</span><span>🚚</span><span>🚛</span><span>🚜</span><span>🦯</span><span>🦽</span><span>🦼</span><span>🛴</span><span>🚲</span><span>🛵</span><span>🏍</span><span>🛺</span><span>🚨</span><span>🚔</span><span>🚍</span><span>🚘</span><span>🚖</span><span>🚡</span><span>🚠</span><span>🚟</span><span>🚃</span><span>🚋</span><span>🚞</span><span>🚝</span><span>🚄</span><span>🚅</span><span>🚈</span><span>🚂</span><span>🚆</span><span>🚇</span><span>🚊</span><span>🚉</span><span>✈️</span><span>🛫</span><span>🛬</span><span>🛩</span><span>💺</span><span>🛰</span><span>🚀</span><span>🛸</span><span>🚁</span><span>🛶</span><span>⛵️</span><span>🚤</span><span>🛥</span><span>🛳</span><span>⛴</span><span>🚢</span><span>⚓️</span><span>⛽️</span><span>🚧</span><span>🚦</span><span>🚥</span><span>🚏</span><span>🗺</span><span>🗿</span><span>🗽</span><span>🗼</span><span>🏰</span><span>🏯</span><span>🏟</span><span>🎡</span><span>🎢</span><span>🎠</span><span>⛲️</span><span>⛱</span><span>🏖</span><span>🏝</span><span>🏜</span><span>🌋</span><span>⛰</span><span>🏔</span><span>🗻</span><span>🏕</span><span>⛺️</span><span>🏠</span><span>🏡</span><span>🏘</span><span>🏚</span><span>🏗</span><span>🏭</span><span>🏢</span><span>🏬</span><span>🏣</span><span>🏤</span><span>🏥</span><span>🏦</span><span>🏨</span><span>🏪</span><span>🏫</span><span>🏩</span><span>💒</span><span>🏛</span><span>⛪️</span><span>🕌</span><span>🕍</span><span>🛕</span><span>🕋</span><span>⛩</span><span>🛤</span><span>🛣</span><span>🗾</span><span>🎑</span><span>🏞</span><span>🌅</span><span>🌄</span><span>🌠</span><span>🎇</span><span>🎆</span><span>🌇</span><span>🌆</span><span>🏙</span><span>🌃</span><span>🌌</span><span>🌉</span><span>🌁</span></div><div role="tabpanel" class="tab-pane emoji-tab" id="e-t-6"><span>⌚️</span><span>📱</span><span>📲</span><span>💻</span><span>⌨️</span><span>🖥</span><span>🖨</span><span>🖱</span><span>🖲</span><span>🕹</span><span>🗜</span><span>💽</span><span>💾</span><span>💿</span><span>📀</span><span>📼</span><span>📷</span><span>📸</span><span>📹</span><span>🎥</span><span>📽</span><span>🎞</span><span>📞</span><span>☎️</span><span>📟</span><span>📠</span><span>📺</span><span>📻</span><span>🎙</span><span>🎚</span><span>🎛</span><span>🧭</span><span>⏱</span><span>⏲</span><span>⏰</span><span>🕰</span><span>⌛️</span><span>⏳</span><span>📡</span><span>🔋</span><span>🔌</span><span>💡</span><span>🔦</span><span>🕯</span><span>🪔</span><span>🧯</span><span>🛢</span><span>💸</span><span>💵</span><span>💴</span><span>💶</span><span>💷</span><span>💰</span><span>💳</span><span>💎</span><span>⚖️</span><span>🧰</span><span>🔧</span><span>🔨</span><span>⚒</span><span>🛠</span><span>⛏</span><span>🔩</span><span>⚙️</span><span>🧱</span><span>⛓</span><span>🧲</span><span>🔫</span><span>💣</span><span>🧨</span><span>🪓</span><span>🔪</span><span>🗡</span><span>⚔️</span><span>🛡</span><span>🚬</span><span>⚰️</span><span>🪦</span><span>⚱️</span><span>🏺</span><span>🔮</span><span>📿</span><span>🧿</span><span>💈</span><span>⚗️</span><span>🔭</span><span>🔬</span><span>🕳</span><span>🩹</span><span>🩺</span><span>💊</span><span>💉</span><span>🩸</span><span>🧬</span><span>🦠</span><span>🧫</span><span>🧪</span><span>🌡</span><span>🧹</span><span>🧺</span><span>🧻</span><span>🚽</span><span>🚰</span><span>🚿</span><span>🛁</span><span>🛀</span><span>🧼</span><span>🪒</span><span>🧽</span><span>🧴</span><span>🛎</span><span>🔑</span><span>🗝</span><span>🚪</span><span>🪑</span><span>🛋</span><span>🛏</span><span>🛌</span><span>🧸</span><span>🖼</span><span>🛍</span><span>🛒</span><span>🎁</span><span>🎈</span><span>🎏</span><span>🎀</span><span>🎊</span><span>🎉</span><span>🎎</span><span>🏮</span><span>🎐</span><span>🧧</span><span>✉️</span><span>📩</span><span>📨</span><span>📧</span><span>💌</span><span>📥</span><span>📤</span><span>📦</span><span>🏷</span><span>📪</span><span>📫</span><span>📬</span><span>📭</span><span>📮</span><span>📯</span><span>📜</span><span>📃</span><span>📄</span><span>📑</span><span>🧾</span><span>📊</span><span>📈</span><span>📉</span><span>🗒</span><span>🗓</span><span>📆</span><span>📅</span><span>🗑</span><span>📇</span><span>🗃</span><span>🗳</span><span>🗄</span><span>📋</span><span>📁</span><span>📂</span><span>🗂</span><span>🗞</span><span>📰</span><span>📓</span><span>📔</span><span>📒</span><span>📕</span><span>📗</span><span>📘</span><span>📙</span><span>📚</span><span>📖</span><span>🔖</span><span>🧷</span><span>🔗</span><span>📎</span><span>🖇</span><span>📐</span><span>📏</span><span>🧮</span><span>📌</span><span>📍</span><span>✂️</span><span>🖊</span><span>🖋</span><span>✒️</span><span>🖌</span><span>🖍</span><span>📝</span><span>✏️</span><span>🔍</span><span>🔎</span><span>🔏</span><span>🔐</span><span>🔒</span><span>🔓</span></div><div role="tabpanel" class="tab-pane emoji-tab" id="e-t-7"><span>❤️</span><span>🧡</span><span>💛</span><span>💚</span><span>💙</span><span>💜</span><span>🖤</span><span>🤍</span><span>🤎</span><span>💔</span><span>❣️</span><span>💕</span><span>💞</span><span>💓</span><span>💗</span><span>💖</span><span>💘</span><span>💝</span><span>💟</span><span>☮️</span><span>✝️</span><span>☪️</span><span>🕉</span><span>☸️</span><span>✡️</span><span>🔯</span><span>🕎</span><span>☯️</span><span>☦️</span><span>🛐</span><span>⛎</span><span>♈️</span><span>♉️</span><span>♊️</span><span>♋️</span><span>♌️</span><span>♍️</span><span>♎️</span><span>♏️</span><span>♐️</span><span>♑️</span><span>♒️</span><span>♓️</span><span>🆔</span><span>⚛️</span><span>🉑</span><span>☢️</span><span>☣️</span><span>📴</span><span>📳</span><span>🈶</span><span>🈚️</span><span>🈸</span><span>🈺</span><span>🈷️</span><span>✴️</span><span>🆚</span><span>💮</span><span>🉐</span><span>㊙️</span><span>㊗️</span><span>🈴</span><span>🈵</span><span>🈹</span><span>🈲</span><span>🅰️</span><span>🅱️</span><span>🆎</span><span>🆑</span><span>🅾️</span><span>🆘</span><span>❌</span><span>⭕️</span><span>🛑</span><span>⛔️</span><span>📛</span><span>🚫</span><span>💯</span><span>💢</span><span>♨️</span><span>🚷</span><span>🚯</span><span>🚳</span><span>🚱</span><span>🔞</span><span>📵</span><span>🚭</span><span>❗️</span><span>❕</span><span>❓</span><span>❔</span><span>‼️</span><span>⁉️</span><span>🔅</span><span>🔆</span><span>〽️</span><span>⚠️</span><span>🚸</span><span>🔱</span><span>⚜️</span><span>🔰</span><span>♻️</span><span>✅</span><span>🈯️</span><span>💹</span><span>❇️</span><span>✳️</span><span>❎</span><span>🌐</span><span>💠</span><span>Ⓜ️</span><span>🌀</span><span>💤</span><span>🏧</span><span>🚾</span><span>♿️</span><span>🅿️</span><span>🛗</span><span>🈳</span><span>🈂️</span><span>🛂</span><span>🛃</span><span>🛄</span><span>🛅</span><span>🚹</span><span>🚺</span><span>🚼</span><span>⚧</span><span>🚻</span><span>🚮</span><span>🎦</span><span>📶</span><span>🈁</span><span>🔣</span><span>ℹ️</span><span>🔤</span><span>🔡</span><span>🔠</span><span>🆖</span><span>🆗</span><span>🆙</span><span>🆒</span><span>🆕</span><span>🆓</span><span>0️⃣</span><span>1️⃣</span><span>2️⃣</span><span>3️⃣</span><span>4️⃣</span><span>5️⃣</span><span>6️⃣</span><span>7️⃣</span><span>8️⃣</span><span>9️⃣</span><span>🔟</span><span>🔢</span><span>#️⃣</span><span>*️⃣</span><span>⏏️</span><span>▶️</span><span>⏸</span><span>⏯</span><span>⏹</span><span>⏺</span><span>⏭</span><span>⏮</span><span>⏩</span><span>⏪</span><span>⏫</span><span>⏬</span><span>◀️</span><span>🔼</span><span>🔽</span><span>➡️</span><span>⬅️</span><span>⬆️</span><span>⬇️</span><span>↗️</span><span>↘️</span><span>↙️</span><span>↖️</span><span>↕️</span><span>↔️</span><span>↪️</span><span>↩️</span><span>⤴️</span><span>⤵️</span><span>🔀</span><span>🔁</span><span>🔂</span><span>🔄</span><span>🔃</span><span>🎵</span><span>🎶</span><span>➕</span><span>➖</span><span>➗</span><span>✖️</span><span>♾</span><span>💲</span><span>💱</span><span>™️</span><span>©️</span><span>®️</span><span>〰️</span><span>➰</span><span>➿</span><span>🔚</span><span>🔙</span><span>🔛</span><span>🔝</span><span>🔜</span><span>✔️</span><span>☑️</span><span>🔘</span><span>🔴</span><span>🟠</span><span>🟡</span><span>🟢</span><span>🔵</span><span>🟣</span><span>⚫️</span><span>⚪️</span><span>🟤</span><span>🔺</span><span>🔻</span><span>🔸</span><span>🔹</span><span>🔶</span><span>🔷</span><span>🔳</span><span>🔲</span><span>▪️</span><span>▫️</span><span>◾️</span><span>◽️</span><span>◼️</span><span>◻️</span><span>🟥</span><span>🟧</span><span>🟨</span><span>🟩</span><span>🟦</span><span>🟪</span><span>⬛️</span><span>⬜️</span><span>🟫</span><span>🔈</span><span>🔇</span><span>🔉</span><span>🔊</span><span>🔔</span><span>🔕</span><span>📣</span><span>📢</span><span>💬</span><span>💭</span><span>🗯</span><span>♠️</span><span>♣️</span><span>♥️</span><span>♦️</span><span>🃏</span><span>🎴</span><span>🀄️</span><span>🕐</span><span>🕑</span><span>🕒</span><span>🕓</span><span>🕔</span><span>🕕</span><span>🕖</span><span>🕗</span><span>🕘</span><span>🕙</span><span>🕚</span><span>🕛</span><span>🕜</span><span>🕝</span><span>🕞</span><span>🕟</span><span>🕠</span><span>🕡</span><span>🕢</span><span>🕣</span><span>🕤</span><span>🕥</span><span>🕦</span><span>🕧</span></div></div></div>');
	} else {
		$('.emoji-panel').remove();
	}

	$('.emoji-tab span').click(function() {
		$('textarea#comment').val($('textarea#comment').val() + $(this).html());
	});
});

// Ẩn Emoji khi bấm ra ngoài
$('body').click(function(e) {
	if (!(e.target).closest('.emoji-panel')) {
		if ($('.emoji-panel').is(':visible')) {
			$('.emoji-panel').remove();
		}
	}
});

Chúc các bạn thành công!