Customizable Emoji Picker For Input And Textarea - jQuery inputEmoji

File Size: 3.14 KB
Views Total: 17549
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Customizable Emoji Picker For Input And Textarea - jQuery inputEmoji

inputEmoji is a jQuery plugin which provides a simple way to insert emojis into textarea and/or input elements.

Click the picker button next to the text field and select an emoji from the popup window. Done.

How to use it:

1. Load the inputEmoji plugin's script inputEmoji.js after you've loaded the latest jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src='inputEmoji.js'></script>

2. Initialize the plugin on the text field and done.

<textarea name="emoji" placeholder="type message here..."></textarea>
<input name="emoji" placeholder="type message here..." />
$(function () {
  $('textarea,input').emoji();
})

3. Customize the trigger emoji. You can find all emoji characters here.

$(function () {
  $('textarea,input').emoji({
    button: '&#x1F642;'
  });
})

4. Set the position of the trigger emoji. Default: 'before'.

$(function () {
  $('textarea,input').emoji({
    place: 'after'
  });
})

5. Set the emoji size. Default: '20px'.

$(function () {
  $('textarea,input').emoji({
    fontSize: '20px'
  });
})

6. Set the predefined emoji list.

$(function () {
  $('textarea,input').emoji({
    emojis: ['&#x1F642;', '&#x1F641;', '&#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;', '&#x1f638;', '&#x1f639;', '&#x1f63a;', '&#x1f63b;', '&#x1f63c;', '&#x1f63d;', '&#x1f63e;', '&#x1f63f;', '&#x1f640;', '&#x1f643;', '&#x1f4a9;', '&#x1f644;', '&#x2620;', '&#x1F44C;','&#x1F44D;', '&#x1F44E;', '&#x1F648;', '&#x1F649;', '&#x1F64A;']
  });
})

7. Customize the styles of the emoji list.

$(function () {
  $('textarea,input').emoji({
    listCSS: {
      position: 'absolute', 
      border: '1px solid gray', 
      background-color: '#fff', 
      display: 'none'
    }
  });
})

8. Set the number of emojis per row.

$(function () {
  $('textarea,input').emoji({
    rowSize: 10
  });
})

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