按下逗号时如何在输入标签中添加更多图标

Question

我想知道如何在输入标签中按下逗号时添加更多图标

before input comma
after input comma

有没有插件或者参考代码？请告诉我

Answer 1

您可以为 keyup 事件添加一个 EventListener，如果按下并释放某个键，该事件将被触发。事件接口提供了一个 code 属性，其中包含按下的键的代码。如果此 code 是“逗号”，则向输入的值添加一个（或任何其他字符或图标）：

const input = document.querySelector("input");

input.addEventListener("keyup", (event) => {
  if (event.code === "Comma")
    input.value += "";
})

<input type="text" value="">

如果要插入 material 图标，可以使用 div 和 contenteditable，并在用户输入逗号后插入 <span class="material-icons">[icon-name]</span>：

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>

不好的是，例如每个房子图标都是五个字符长，因为我们在 span 中使用 house 并且在 google [=41] 中是一个房子图标=] 图标字体，但它仍然保持五个字符长。但这可以使用另一种图标字体来解决，它适用于类.

按下逗号时如何在输入标签中添加更多图标

How can I add more icon in input tag when I key down comma

html

javascript

markup

icons

input