jQuery & EmojiOne Based Emoji Picker For Textarea

File Size: 22.4 KB
Views Total: 7119
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery & EmojiOne Based Emoji Picker For Textarea

A dead simple jQuery plugin to display an emoji picker inside your textarea element that allows the user to select favorite emojis from a dropdown box using the popular EmojiOne™ library. Supports both shortcode and Unicode.

How to use it:

1. Download the EmojiOne Textarea Picker and reference the following JavaScript & CSS files in your HTML file.

<link href="dist/emojione.picker.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/emojione.picker.js"></script>

2. Simply invoke the plugin on the target text element and we're done.

$( "textarea" ).emojionePicker();

3. Set the top and right margins of the emoji picker.

$( "textarea" ).emojionePicker({
  pickerTop: 5,
  pickerRight: 5

4. Determine which emoji type you want to send to the textarea, valid values are "shortcode" and "unicode".

$( "textarea" ).emojionePicker({
   type: "shortcode"

Change log:


  • Update emojione.picker.js

This awesome jQuery plugin is developed by twizdev. For more Advanced Usages, please check the demo page or visit the official website.