Emoji Picker For Textarea In jQuery – emojiarea.js

Form
Emoji Picker For Textarea - jQuery emojiarea
File Size: 749.29 KB
Views Total: 958 views
Last Update:February 18, 2023
Publish Date: October 18, 2017
Official Website: Go to website
License: MIT
Plugin Author: wstoettinger
Demo    Download

A Free jQuery Plugins with Emoji Picker for textarea plugin build with emojiarea.js is user-friendly solution for adding an emoji picker to text areas on a website or application. This plugin allows users to easily add emojis to their messages, comments, or any other text input field. With this plugin, users can easily browse and select from a wide range of emojis to add to their text. The picker can be customized with different themes and styles, and the selected emoji can be inserted into the textarea using a simple click or tap.

Whether you’re building a chat app, social media platform, or just want to add some fun and personality to your forms, the jQuery Emojiarea plugin is a great option to consider. It supports a wide range of emojis and provides a search feature to help users find the perfect emoji.

Installation:

# NPM
$ npm install jquery.emojiarea.js --save

How to use ?

Add jQuery library (slim build) and jQuery emojiarea.js to the page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="jquery.emojiarea.js"></script>

Wrap your textarea element into a container with the following data attributes:

  • data-emojiarea: required
  • data-type=”unicode”: or “CSS”, “image”
  • data-global-picker=”false”: true or false
<div data-emojiarea 
     data-type="image" 
     data-global-picker="false">
  <i class="emoji emoji-smile emoji-button">&#x1f604;</i>
  <textarea>&#x1f604;</textarea>
</div>

Add Style the emoji picker in the CSS.

.emoji {
  color: transparent;
  display: inline-block;
  font-size: 18px;
  font-style: normal;
  height: 25px;
  width: 25px;
}

.emoji::selection {
  background-color: highlight;
  color: transparent;
}

.emoji-image {
  font-size: 14px;
  line-height: 28px;
}

.emoji-button {
  cursor: pointer;
  margin: 5px;
}

.emoji-editor {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  cursor: text;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  -webkit-font-smoothing: antialiased;
  height: 100px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 100%;
}

.emoji-picker {
  background-color: #fff;
  border: 1px solid #ccc;
  position: absolute;
  width: 210px;
}

.emoji-picker a {
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  padding: 3px;
}

.emoji-selector {
  border-bottom: 1px solid #ccc;
  display: flex;
}

.emoji-selector li { margin: 5px; }

.emoji-group {
  display: grid;
  grid-template-columns: repeat(6, 16.66667%);
  height: 200px;
  overflow-y: scroll;
  padding: 3px;
}

Set the path to the emoji image.

EmojiArea.DEFAULTS.assetPath = './assets/images';

Done

Thanks for make jQuery plugin is developed by wstoettinger For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v0.1.6-beta
  • v0.1.2-beta

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.