Emoji Picker For Input Fields – jQuery emoji-picker.js

Other
Emoji Picker For Text Fields - jQuery emoji-picker.js
File Size: 3.1 MB
Views Total: 965 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author: jmadler
Demo    Download

A Free jQuery Plugins With Emoji Picker plugin for text Input fields. This is a useful tool for adding a wide variety of emojis to text input fields on your web pages. This Plugin is a great way to add a fun and engaging feature to your web applications. This plugin provides a user-friendly interface for browsing and selecting emojis, with the ability to search for specific emojis by keyword or category.
Whether you’re building a social media platform or a chat app, the Emoji Picker plugin for text fields is definitely worth considering. Users will appreciate the convenience of being able to easily add emojis to their text, and it can help add a more engaging and playful element to your web pages.

How to use ?

Add the jQuery library and jQuery emojiarea.js plugin in the html file.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.emojiarea.min.js"></script>

Add required the jQuery emoji-picker.js plugin’s files.

<link href="./lib/css/emoji.css" rel="stylesheet">
<script src="./lib/js/config.min.js"></script>
<script src="./lib/js/util.min.js"></script>
<script src="./lib/js/emoji-picker.min.js"></script>

Add your text fields into the emoji-picker-container.

<p class="emoji-picker-container">
  <input data-emojiable="true" maxlength="10" />
</p>
<p class="lead emoji-picker-container">
  <textarea data-emojiable="true"></textarea>
</p>

Attach the emoji picker to the text fields.

$(function() {
  // Initializes and creates emoji set from sprite sheet
  window.emojiPicker = new EmojiPicker({
    emojiable_selector: '[data-emojiable=true]',
    assetsPath: './lib/img/',
    <a href="https://www.jquerypost.com/tag/modal-popup/">popup</a>ButtonClasses: 'fa fa-smile-o', // font awesome icon
  });
  // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
  // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
  // It can be called as many times as necessary; previously converted input fields will not be converted again
  window.emojiPicker.discover();
});

Insert unicode emojis instead of images.

<p class="emoji-picker-container">
  <input data-emojiable="true" data-emoji-input="unicode" maxlength="10" />
</p>
<p class="lead emoji-picker-container">
  <textarea data-emojiable="true" data-emoji-input="unicode"></textarea>
</p>

Done

Thanks for make jQuery plugin is developed by jmadler For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.