按下逗号时如何在输入标签中添加更多图标
[英]How can I add more icon in input tag when I key down comma
问题描述
I'm wondering how can I add more icon, when I keydown comma inside input tag
我想知道当我在输入标签中按下逗号时如何添加更多图标
before input comma输入逗号前
after input comma输入逗号后
is there any plugins or reference code?有没有插件或者参考代码？ please let me know请告诉我
1 个解决方案
解决方案1
0 已采纳 2022-05-08 14:45:14
You can add an EventListener for the keyup event, that is fired, if a key was pressed and is released.您可以为keyup事件添加一个 EventListener，如果按下并释放某个键，则会触发该事件。 The event interface proviedes a code property, that contains the code of the key that was pressed.事件接口提供了一个code属性，其中包含按下的键的代码。 If this code is "Comma", you add a (or any other character or icon) to the input's value:如果此code是“逗号”，则向输入的值添加一个（或任何其他字符或图标）：
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:如果你想插入材质图标，你可以使用带有contenteditable的div并在用户输入逗号后插入<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>
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.不好的是，例如每个房子图标都是五个字符长，因为我们在 span 中使用了house ，那是 google material icons 字体中的房子图标，但它仍然是五个字符长。 But this could be solved using another icon font, that works with classes.但这可以使用另一种适用于类的图标字体来解决。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.