当前位置：文江博客话题详情

当我键入逗号时，如何在输入标签中添加更多图标

发布于 2025-01-27 15:11:51 字数 270 浏览 2 评论 0原文

我想知道如何添加更多图标，当我在输入标签中键入逗号

是否有任何插件或参考代码？请告诉我

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天邊彩虹 2025-02-03 15:11:51

您可以为键UP事件添加EventListener，如果按下键并释放了一个键。事件接口提供了代码属性，其中包含按下的密钥的代码。如果此代码是“逗号”，则在输入的值中添加

You can add an EventListener for the keyup event, that is fired, if a key was pressed and is released. The event interface proviedes a code property, that contains the code of the key that was pressed. If this code is "Comma", you add a ???? (or any other character or icon) to the input's value:

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

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

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

If you want to insert material icons, you can use a div with contenteditable and insert a <span class="material-icons">[icon-name]</span> after the user typed a comma:

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>

The bad thing about this is, that for example every house icon is five characters long, because we use house in the span and that is a house icon in the google material icons font, but it still remains five characters long. But this could be solved using another icon font, that works with classes.

回复收藏 0 原文

~没有更多了~