Selector de Emoji con autocompletar en JavaScript
| Autor: | rickycodes |
|---|---|
| Views Total: | 821 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 30, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un simple y conveniente selector de Emoji escrito en JavaScript puro (ES6) que te permite seleccionar imágenes Emoji desde un panel desplegable de autocompletar mientras escribes palabras clave Emoji.
Funcionamiento
Importe los módulos necesarios en el documento.
<script type='module'> import picker from './src/index.js' import fetchJSON from './src/fetchJSON.js' </script>
Prepare los datos Emoji en un archivo JSON.
// emoji data
{"100":"????","1234":"????", ...} Adjunte el selector de Emoji a un campo de entrada que especifique.
<input type='text' class='input'>
fetchJSON('./src/emoji.json').then(emoji => picker('.input', emoji)) Estilo del selector de Emoji utilizando su propio CSS.
.input {
font-size: 30px;
font-family: "segoe ui emoji", sans-serif;
width: 80%;
max-width: 600px;
letter-spacing: 1px;
border-radius: 6px;
padding: 10px;
border: 3px solid grey;
outline: none;
margin-bottom: 6px;
}
.input:focus {
border-color: hotpink;
}
.emoji {
width: auto;
display: inline-block;
font-size: 30px;
padding: 4px 8px;
margin: 4px;
border-radius: 6px;
border: 2px solid grey;
cursor: pointer;
}
.emoji:first-child {
margin-left: 0;
}
.emoji:hover {
border-color: hotpink;
}
