Put some soul in your forms!
Full-featured, pure javascript, plugin to seamless integrate emojis into text inputs and textareas.
Emojis are nowadays more used than words. To implement them into text fields gives a modern and original touch to your websites.
Just a single 15KB javascript file (plus emojis list JSON).
No dependencies, and you are ready to go!
Basic Implementation
<!doctype html>
<html>
<head></head>
<body>
<form>
<input type="text" name="sample-input" value="" />
<textarea name="sample-textarea" value=""></textarea> </form> <script src="lc_emoji_picker.min.js" type="text/javascript"></script> <script type="text/javascript">
new lc_emoji_picker('textarea, input');
</script> </body></html> Options
Here are listed available options with default values
new lc_emoji_picker('textarea, input', {
// (string) html code injected as picker trigger
picker_trigger :
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"><g><g><path d="M437.02,74.98C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.668,74.98,181.02C123.333,485.371,187.62,512,256,512s132.667-26.629,181.02-74.98C485.371,388.668,512,324.38,512,256S485.371,123.333,437.02,74.98z M256,472c-119.103,0-216-96.897-216-216S136.897,40,256,40s216,96.897,216,216S375.103,472,256,472z"/></g></g><g><g><path d="M368.993,285.776c-0.072,0.214-7.298,21.626-25.02,42.393C321.419,354.599,292.628,368,258.4,368c-34.475,0-64.195-13.561-88.333-40.303c-18.92-20.962-27.272-42.54-27.33-42.691l-37.475,13.99c0.42,1.122,10.533,27.792,34.013,54.273C171.022,389.074,212.215,408,258.4,408c46.412,0,86.904-19.076,117.099-55.166c22.318-26.675,31.165-53.55,31.531-54.681L368.993,285.776z"/></g></g><g><g><circle cx="168" cy="180.12" r="32"/></g></g><g><g><circle cx="344" cy="180.12" r="32"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>',
// (object) defies trigger position relatively to target field
trigger_position : {
top : '5px',
right: '5px',
},
// (object) defines trigger size
trigger_size : {
height : '22px',
width: '22px',
},
// (int) right padding value (in pixels) applied to target field to avoid texts under the trigger
target_r_padding : 27,
// (string) emoji JSON url
emoji_json_url : 'https://raw.githubusercontent.com/LCweb-ita/LC-emoji-picker/master/emoji-list.min.json',
// (array) option used to translate script texts
labels : [
'insert emoji',
'search emoji',
'.. no results ..',
],
// (function) triggered as soon as an emoji is selected. Passes emoji and target field objects as parameters
selection_callback : null, // function(emoji, target_field) {},
});