Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/index.html

Last active December 18, 2022 10:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nolanlawson/4f13bc639cdb3483efca8b657f30a1e0 to your computer and use it in GitHub Desktop.
Save nolanlawson/4f13bc639cdb3483efca8b657f30a1e0 to your computer and use it in GitHub Desktop.
Download ZIP
emoji-picker element: inserting characters into text input
Raw
index.html
<!doctype html>
<html lang=en>
<head>
<title>emoji-picker element: inserting characters into text input</title>
<style> label, div {
padding: 10px;
}
</style>
</head>
<body>
<h1>emoji-picker element: inserting characters into text input</h1>
<div>
This demo shows how to use emoji-picker-element to insert emoji into the current cursor position in a text input.
It uses <a href="https://www.npmjs.com/package/insert-text-at-cursor" target="_blank">insert-text-at-cursor</a>
for convenience.
</div>
<label>
Type here:
<input type=text placeholder="Type here">
</label>
<div>Choose an emoji:</div>
<emoji-picker></emoji-picker>
<script type="module">
import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js'
import insertText from 'https://cdn.jsdelivr.net/npm/insert-text-at-cursor@0.3.0/index.js'
document.querySelector('emoji-picker').addEventListener('emoji-click', e => {
insertText(document.querySelector('input'), e.detail.unicode)
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment