Add emoji between text – jQuery

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.

Requirements:

  1. jQuery
  2. Emoji picker
  3. twemoji

After downloading all the above files, create 2 folders “css” and “js”. Place the CSS files in “css” folder and Javascript files in “js” folder.

After that, you need to include all these files in your code:

<link rel="stylesheet" href="css/emojis.css" />

<script src="js/jquery.js"></script>
<script src="js/DisMojiPicker.js"></script>
<script src="js/twemoji.min.js"></script>

Then, create an input field where you will enter the text and give it a unique ID.

<textarea id="textInput"></textarea>

Create a container where the emoji picker will be displayed. Give it a unique ID as well.

<div id="emojis"></div>

In your Javascript, initialize the emoji picker.

<script>
	$("#emojis").disMojiPicker()
	twemoji.parse(document.body)
</script>

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.

[wpdm_package id=’2918′]

Emoji ratings feedback – Javascript

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.

SmileyHTML code
๐Ÿ˜€&#x1F600;
๐Ÿ˜&#x1F601;
๐Ÿ˜‚&#x1F602;
๐Ÿ˜ƒ&#x1F603;
๐Ÿ˜„&#x1F604;
๐Ÿ˜…&#x1F605;
๐Ÿ˜†&#x1F606;
๐Ÿ˜‡&#x1F607;
๐Ÿ˜ˆ&#x1F608;
๐Ÿ˜‰&#x1F609;
๐Ÿ˜Š&#x1F60A;
๐Ÿ˜‹&#x1F60B;
๐Ÿ˜Œ&#x1F60C;
๐Ÿ˜&#x1F60D;
๐Ÿ˜Ž&#x1F60E;
๐Ÿ˜&#x1F60F;
๐Ÿ˜&#x1F610;
๐Ÿ˜‘&#x1F611;
๐Ÿ˜’&#x1F612;
๐Ÿ˜“&#x1F613;
๐Ÿ˜”&#x1F614;
๐Ÿ˜•&#x1F615;
๐Ÿ˜–&#x1F616;
๐Ÿ˜—&#x1F617;
๐Ÿ˜˜&#x1F618;
๐Ÿ˜™&#x1F619;
๐Ÿ˜š&#x1F61A;
๐Ÿ˜›&#x1F61B;
๐Ÿ˜œ&#x1F61C;
๐Ÿ˜&#x1F61D;
๐Ÿ˜ž&#x1F61E;
๐Ÿ˜Ÿ&#x1F61F;
๐Ÿ˜ &#x1F620;
๐Ÿ˜ก&#x1F621;
๐Ÿ˜ข&#x1F622;
๐Ÿ˜ฃ&#x1F623;
๐Ÿ˜ค&#x1F624;
๐Ÿ˜ฅ&#x1F625;
๐Ÿ˜ฆ&#x1F626;
๐Ÿ˜ง&#x1F627;
๐Ÿ˜จ&#x1F628;
๐Ÿ˜ฉ&#x1F629;
๐Ÿ˜ช&#x1F62A;
๐Ÿ˜ซ&#x1F62B;
๐Ÿ˜ฌ&#x1F62C;
๐Ÿ˜ญ&#x1F62D;
๐Ÿ˜ฎ&#x1F62E;
๐Ÿ˜ฏ&#x1F62F;
๐Ÿ˜ฐ&#x1F630;
๐Ÿ˜ฑ&#x1F631;
๐Ÿ˜ฒ&#x1F632;
๐Ÿ˜ณ&#x1F633;
๐Ÿ˜ด&#x1F634;
๐Ÿ˜ต&#x1F635;
๐Ÿ˜ถ&#x1F636;
๐Ÿ˜ท&#x1F637;
๐Ÿ™&#x1F641;
๐Ÿ™‚&#x1F642;
๐Ÿ™ƒ&#x1F643;
๐Ÿ™„&#x1F644;
๐Ÿค&#x1F910;
๐Ÿค‘&#x1F911;
๐Ÿค’&#x1F912;
๐Ÿค“&#x1F913;
๐Ÿค”&#x1F914;
๐Ÿค•&#x1F915;
๐Ÿค &#x1F920;
๐Ÿคก&#x1F921;
๐Ÿคข&#x1F922;
๐Ÿคฃ&#x1F923;
๐Ÿคค&#x1F924;
๐Ÿคฅ&#x1F925;
๐Ÿคง&#x1F927;
๐Ÿคจ&#x1F928;
๐Ÿคฉ&#x1F929;
๐Ÿคช&#x1F92A;
๐Ÿคซ&#x1F92B;
๐Ÿคฌ&#x1F92C;
๐Ÿคญ&#x1F92D;
๐Ÿคฎ&#x1F92E;
๐Ÿคฏ&#x1F92F;
๐Ÿง&#x1F9D0;

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:

<div class="emoji-container">

<h3>Communication</h3>

<div class="emoji">
	๐Ÿ™‚
</div>

<p class="emoji-text">Satisfied</p>

<input type="range" name="status[communication]" min="0" max="4" step="1">
</div>

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.

<style>
	.emoji {
		font-size: 60px;
	}
	input[type="range"] {
		cursor: ew-resize;
	}
</style>

Change emoji ratings with slider

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: "&#x1F621", text: "Hate it"},
		{ emoji: "&#x1F613", text: "Difficult to understand"},
		{ emoji: "&#x1F642", text: "Satisfied"},
		{ emoji: "&#x1F600", text: "Very happy"},
		{ emoji: "&#x1F618", 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, communicationservice 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.

save-feedback.php

<?php

$conn = mysqli_connect("localhost", "root", "", "tutorials");

$communication = $_POST["status"]["communication"];
$service = $_POST["status"]["service"];
$support = $_POST["status"]["support"];

$sql = "INSERT INTO feedback(communication, service, support) VALUES('$communication', '$service', '$support')";
mysqli_query($conn, $sql);

echo "Done";

?>

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.

get-feedback.php

<?php

$conn = mysqli_connect("localhost", "root", "", "tutorials");

$sql = "SELECT * FROM feedback";
$result = mysqli_query($conn, $sql);

$data = array();
while ($row = mysqli_fetch_object($result))
{
	array_push($data, $row);
}
echo json_encode($data);

?>

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.

Learn how to calculate average ratings from here.

[wpdm_package id=’216′]