要实现标签允许用户输入的功能,可以使用HTML和JavaScript来完成。以下是一个简单的示例代码:
HTML部分:
JavaScript部分:
function addTag() {
var userTag = document.getElementById("userTag").value; // 获取用户输入的标签内容
var tagList = document.getElementById("tagList");
// 创建一个新的标签元素,并设置其内容和样式
var newTag = document.createElement("span");
newTag.innerText = userTag;
newTag.className = "tag";
// 将新标签添加到标签列表中
tagList.appendChild(newTag);
// 清空输入框
document.getElementById("userTag").value = "";
}
CSS部分:
.tag {
display: inline-block;
padding: 5px;
margin: 5px;
background-color: #f1f1f1;
border-radius: 5px;
}
在上面的示例中,用户可以在输入框中输入标签内容,然后点击“添加标签”按钮,将输入的标签添加到标签列表中。每个标签使用元素表示,并使用CSS样式进行美化。