Easy jQuery Emoji Picker For Text Fields

A customizable, simple-to-use, jQuery powered emoji picker for text fields that support Apple Emoji, Android Emoji and Twitter Emoji.

How to use it:

1. Load the jQuery Emoji Picker's main JavaScript and CSS files in the webpage.

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

2. Load an Emoji icon set of your your choice as follows:

<!-- Twitter Emoji -->
<link rel="stylesheet" href="css/jquery.emojipicker.tw.css">
<!-- Apple Emoji -->
<link rel="stylesheet" href="css/jquery.emojipicker.a.css">
<!-- Android Emoji -->
<link rel="stylesheet" href="css/jquery.emojipicker.g.css">
<!-- Emoji data -->
<script src="js/jquery.emojis.js"></script>

3. Activate the emoji picker on the text field (input field or textarea) you specify.

$('.element').emojiPicker({
  // options here
});

4. Config the emoji picker by overriding the following options on init.

$('.element').emojiPicker({
  width: '200',
  height: '350',
  position: 'right',
  fadeTime: 100,
  iconColor: 'black',
  iconBackgroundColor: '#eee',
  recentCount: 36,
  emojiSet: 'apple',
  container: 'body',
  button: true
});

5. Sometimes you might need to execute callback functions when the emoji picker is shown or hidden.

$('.element').emojiPicker({
  onShow: function(picker, settings, isActive) {
    // ...
  },
  onHide: function(picker, settings, isActive) {
    // ...
  }
});

6. API methods.

// toggle the emoji picker on/off
$('.element').emojiPicker('toggle');

// destroy the plugin and remove the emoji picker from DOM
$('.element').emojiPicker('destroy');

Change log:

2017-06-13

• Fix a bug related to clicking on emojis

---

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