Add a emoji to textarea on your web page.
Its emoji list was created based on the Unicode Emoji data files. The order is same the emoji-test.txt.
- v13.0
- Skin tones
- Unqualified emoji
- Install a
emoji-picker-textareawith npm.
$ npm install emoji-picker-textarea
- Add the stylesheet link in your
<head>section.
<link rel="stylesheet" type="text/css" href="node_modules/emoji-picker-textarea/css/emoji-picker-textarea.css" />
- Add the JavaScript link before the end of your
<body>section.
<script type="text/javascript" src="node_modules/emoji-picker-textarea/index.js"></script>
- Add some JavaScript codes are creating
EmojiPicker, showing the picker and hiding it.
let emojiPicker;
let isOpen = false;
function createEmojiPicker() {
// Add a emoji to this textarea.
let textarea = document.getElementById("textarea");
// Show the picker to this element. The element would be parent of the picker.
let picker_area = document.getElementById("emoji-picker-area");
// Create the picker by specifying the width and height of it.
emojiPicker = new EmojiPicker(textarea, picker_area, "250px", "200px");
}
function toggleEmojiPicker() {
if (isOpen) {
// Hide the picker.
emojiPicker.hide();
} else {
// Show the picker.
emojiPicker.show();
}
isOpen = !isOpen;
}