In this tutorial, we will teach you, how you can add emoji between text using jQuery. Emoji picker is a library that allows you to select a wide variety of emojis. It is a Javascript library that returns the emoji character. You can append the emoji in your input fields as well.
This library is very useful specially if you are developing a chat app. For example, user can share emojis in messages.
But it has one problem: what happens when user has typed a message, now he wants to add the emoji in between the message ? The library does not provide such functionality by default.
So that we are going to do, is to get the current cursor position on the input field and set the emoji in-between the text.
If you refresh the page now, you will start seeing the emoji picker. Now we need to make it to set the emoji in input field.
// callback function that will be called when an emoji is clicked from emoji picker
$("#emojis").picker(function (emoji) {
// get the current cursor position on textarea field
const cursorPosition = $("#textInput").prop("selectionStart")
// get the current value of texarea field
const value = $("#textInput").val()
// check if cursor is at the end of the text
if (cursorPosition == value.length) {
// append the emoji at the end
$("#textInput").val(value + emoji)
} else {
// if cursor is in between the text
// then prepend the emoji before next character
$("#textInput").val(value.replace(value[cursorPosition], emoji + value[cursorPosition]))
}
})
We created a single page chat application in MEVN stack where we implemented this emoji picker. You can check that project here.
Learn how to get feedback from your website users using emoji ratings. We will be using plain Javascript. No external library has been used in this tutorial.
Below is a list of all possible emojis at the time of writing this. You can found any new emoji missing, please do inform us in the comments section below.
Smiley
HTML code
๐
😀
๐
😁
๐
😂
๐
😃
๐
😄
๐
😅
๐
😆
๐
😇
๐
😈
๐
😉
๐
😊
๐
😋
๐
😌
๐
😍
๐
😎
๐
😏
๐
😐
๐
😑
๐
😒
๐
😓
๐
😔
๐
😕
๐
😖
๐
😗
๐
😘
๐
😙
๐
😚
๐
😛
๐
😜
๐
😝
๐
😞
๐
😟
๐
😠
๐ก
😡
๐ข
😢
๐ฃ
😣
๐ค
😤
๐ฅ
😥
๐ฆ
😦
๐ง
😧
๐จ
😨
๐ฉ
😩
๐ช
😪
๐ซ
😫
๐ฌ
😬
๐ญ
😭
๐ฎ
😮
๐ฏ
😯
๐ฐ
😰
๐ฑ
😱
๐ฒ
😲
๐ณ
😳
๐ด
😴
๐ต
😵
๐ถ
😶
๐ท
😷
๐
🙁
๐
🙂
๐
🙃
๐
🙄
๐ค
🤐
๐ค
🤑
๐ค
🤒
๐ค
🤓
๐ค
🤔
๐ค
🤕
๐ค
🤠
๐คก
🤡
๐คข
🤢
๐คฃ
🤣
๐คค
🤤
๐คฅ
🤥
๐คง
🤧
๐คจ
🤨
๐คฉ
🤩
๐คช
🤪
๐คซ
🤫
๐คฌ
🤬
๐คญ
🤭
๐คฎ
🤮
๐คฏ
🤯
๐ง
🧐
Create input slider range
Create a div to display default emoji ratings, for example if you want the default feedback about communication to be “satisfied” then display the following emoji:
To view the emoji in large size, simply change the font size of emoji class. If you want to show the horizontal arrows for input type range, just change the cursor CSS property.
Now create an array to store all type of emojis you want to display with your slider, and the meaning of each emoji in array of objects. Then we need to loop through all input type ranges and attach onmousemove listener to each slider.
Whenever the value of slider changes, we will get the emoji object using value of slider, and display it in emoji-container. This will replace emoji and its meaning text to whatever the value of current slider is.
If you are using only one slider in your document, you can use simply document.querySelector(“.emoji-container”) to get the container div of that emoji.
<script>
var emojis = [
{ emoji: "😡", text: "Hate it"},
{ emoji: "😓", text: "Difficult to understand"},
{ emoji: "🙂", text: "Satisfied"},
{ emoji: "😀", text: "Very happy"},
{ emoji: "😘", text: "Loved it"}
];
var range = document.querySelectorAll("input[type='range']");
for (var a = 0; a < range.length; a++) {
range[a].onmousemove = function (event) {
var index = this.value;
var emojiContainer = this.closest(".emoji-container");
emojiContainer.querySelector(".emoji").innerHTML = emojis[index].emoji;
emojiContainer.querySelector(".emoji-text").innerHTML = emojis[index].text;
};
}
</script>
To save these feedback in database, enclose all your emoji-container divs in form tag and specify method as POST, and action to the file which will process this form data. If you sending input type file too, you also need to add an attribute enctype=”multipart/form-data” to form tag.
<form method="POST" action="save-feedback.php">
<!-- All above emoji containers here -->
<input type="submit">
</form>
Save data in database
We have created a simple database named tutorials and a table named feedback. It just has three columns, communication, service and support. The data type of these columns will be INTEGER as in database we just be saving ratings on a scale of 1 to 5. First parameter in $_POST array will be name of input type range, and second will be the associative index we have set. Here we are receiving 3 types of feedback from user. The insert query is pretty basic.
Change the emoji using slider and hit the submit button. You will see a new row will be inserted in database with integer value in respective columns. These integer values will tell the user feedback on a scale of 1 to 5.
Display on admin side
Now you might have an admin panel where you want to see the ratings given by user. So we will call a simple AJAX request to fetch those feedbacks from database. Our emojis array will remain same, and we can display the respective emoji based on database column value. First create an API page that will return all feedbacks in JSON format.
Now back in index.php, we will send a simple AJAX request which will return all feedbacks in JSON string. We will parse that JSON into javascript arrays and objects. Create a div where all emojis needs to be displayed and display them using simple for loop.
<div id="feedback"></div>
var ajax = new XMLHttpRequest();
ajax.open("GET", "get-feedback.php", true);
ajax.send();
ajax.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
var html = "";
for (var a = 0; a < data.length; a++) {
var communicationIndex = data[a].communication;
var communication = emojis[communicationIndex];
var serviceIndex = data[a].service;
var service = emojis[serviceIndex];
var supportIndex = data[a].support;
var support = emojis[supportIndex];
html += "<p>Communication: <span class='emoji'>" + communication.emoji + "</span>" + communication.text + "";
html += "<p>Service: <span class='emoji'>" + service.emoji + "</span>" + service.text + "</p>";
html += "<p>Support: <span class='emoji'>" + support.emoji + "</span>" + support.text + "</p>";
}
document.getElementById("feedback").innerHTML = html;
}
};
Run this script on your admin panel and you will be able to view the user added feedback in emoji ratings and their meaning.