docs/demos/input/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/text-field-edit" target="_blank">text-field-edit</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 textFieldEdit from 'https://cdn.jsdelivr.net/npm/text-field-edit@^4/index.js'

  document.querySelector('emoji-picker').addEventListener('emoji-click', e => {
    textFieldEdit.insert(document.querySelector('input'), e.detail.unicode)
  })
</script>
</body>
</html>