Installation & Usage:
- In your
<head>section, add the following stylesheet links. Adjust the
lib/csspath to match yours.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"> <link href="lib/css/emoji.css" rel="stylesheet">
- Before the end of your
lib/jspath to match yours.
<!-- ** Don't forget to Add jQuery here ** --> <script src="lib/js/config.js"></script> <script src="lib/js/util.js"></script> <script src="lib/js/jquery.emojiarea.js"></script> <script src="lib/js/emoji-picker.js"></script>
On any input field, add the data attribute
That's all you need for the default options. Play around with the demo to see what the default options give you.
I want the Emoji selector to input Unicode characters instead of images
data-emoji-input="unicode" to your input field. Only the
unicode value is checked for; entering anything else has no effect.
I want to limit my input field to a certain number of characters (maxlength)
maxlength property is supported. Character input and emoji input each count as one character, so it'll stop you from entering more than the max length.
I want classes from my original input field to be copied over to the rich emoji input area
- Input fields converted to contenteditable rich text areas with emoji support
- A happy face icon on the top right of each rich text area, which brings up the menu on click
- An emoji selection menu, with recently selected emojis at the top (thanks to angular-emoji-popup's author)
- Text area values can be easily converted between Unicode and HTML (Unicode+Image Tags)
What happens under the hood:
- When you call
new EmojiPicker().discover(), all elements with the data attribute
data-emojiable="true"are found, a contenteditable div is created after each one, and the original input field is hidden.
- When you type text into this contenteditable div, events are triggered upon each keypress/text change as well as each emoji selection, and the contents of this contenteditable div are copied to the original (now hidden) input field
- Text entered into this contenteditable div is plain text; selected emojis are actually
- To get the value of the contenteditable div, call
element.val()on the underlying hidden input field. The
<img>emojis will be converted into Unicode emojis (plain text)
This is a slightly modified version of angular-emoji-popup, which was written based on jquery-emojiarea (converts input fields to rich emoji input areas) and uses nanoScrollerJs (for the popup's custom-skinned scrollbar). This version removes AngularJS as a dependency.
Improvements from the original forks:
- The top-right smiley face that allows you to bring up the emoji picker menu
- The smiley face shifts left appropriately when text entered exceeds the height and causes a scrollbar to appear
maxlengthproperty of input fields is respected (emoji selections count as a single character)
- CSS classes from the original input field are copied over to the new contenteditable div
We built this to power emoji selection for OneSignal, our multi-platform push notification service.