Me pregunto cómo puedo agregar más íconos cuando presiono una coma dentro de la etiqueta de entrada
antes de la coma de entrada
después de la coma de entrada
¿Hay algún complemento o código de referencia? por favor hágamelo saber
Puede agregar un EventListener para el evento keyup , que se activa, si se presionó y soltó una tecla. La interfaz de eventos proporciona una propiedad de code que contiene el código de la tecla que se presionó. Si este code es "Coma", agrega un 🏠 (o cualquier otro carácter o ícono) al valor de la entrada:
const input = document.querySelector("input"); input.addEventListener("keyup", (event) => { if (event.code === "Comma") input.value += "🏠"; }) <input type="text" value="🏠"> Si desea insertar íconos de material, puede usar un div con contenteditable e insertar un <span class="material-icons">[icon-name]</span> después de que el usuario haya escrito una coma:
const icon = `<span class="material-icons">house</span>` const input = document.querySelector("div[contenteditable]"); input.addEventListener("keyup", (event) => { if (event.code === "Comma") input.innerHTML += icon; }) div[contenteditable] { border: 1px solid black; } <html lang="en"> <head> <!-- ... --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div contenteditable><span class="material-icons">house</span></div> </body> </html> Lo malo de esto es que, por ejemplo, cada ícono de casa tiene cinco caracteres, porque usamos house en el lapso y ese es un ícono de casa en la fuente de íconos de material de Google, pero aún permanece cinco caracteres. Pero esto podría resolverse usando otra fuente de iconos, que funcione con clases.