如何使用 JavaScript 实现标签输入框功能
标签输入框是一种常见的用户交互组件，它允许用户输入多个标签，并且可以动态添加、删除标签。在本文中，我们将使用 JavaScript来实现一个简单的标签输入框功能。下面是具体的实现代码示例：
HTML 结构
首先，我们需要在HTML中创建一个用于输入标签的<input>元素和一个显示标签的<div>容器。HTML代码如下：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><input id="tag-input" type="text" placeholder="请输入标签"/>
<div id="tag-container"></div></pre>登录后复制
</div><p>JavaScript 代码</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/xiazai/code/9331">
<img src="https://img.php.cn/upload/webcode/000/000/014/175868640629271.png" alt="情感家园企业站5.0 多语言多风格版">
</a>
<div class="aritcle_card_info">
<a href="/xiazai/code/9331">情感家园企业站5.0 多语言多风格版</a>
<p>一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="情感家园企业站5.0 多语言多风格版">
<span>0</span>
</div>
</div>
<a href="/xiazai/code/9331" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="情感家园企业站5.0 多语言多风格版">
</a>
</div>
<p>接下来，我们使用 JavaScript 来实现标签输入框的功能。代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>// 获取标签输入框和标签容器元素
const input = document.getElementById('tag-input');
const container = document.getElementById('tag-container');
// 定义一个数组来存储用户输入的标签
let tags = [];
// 监听键盘按下事件，回车键添加标签
input.addEventListener('keydown', function(event) {
if (event.keyCode === 13) {
const tag = input.value.trim();
// 检查标签是否已存在
if (tags.includes(tag)) {
alert('该标签已存在，请输入其他标签');
} else if (tag !== '') {
// 添加标签到数组
tags.push(tag);
// 清空输入框并重新渲染标签
input.value = '';
renderTags();
}
}
});
// 渲染标签函数
function renderTags() {
// 清空标签容器
container.innerHTML = '';
// 遍历标签数组，创建标签元素并加入容器
tags.forEach(function(tag) {
const tagDiv = document.createElement('div');
tagDiv.innerText = tag;
// 为每个标签添加一个删除按钮
const deleteButton = document.createElement('span');
deleteButton.innerText = 'x';
deleteButton.addEventListener('click', function(event) {
// 获取被点击的标签的索引
const index = tags.indexOf(tag);
// 从标签数组中删除该元素并重新渲染标签
tags.splice(index, 1);
renderTags();
});
tagDiv.appendChild(deleteButton);
container.appendChild(tagDiv);
});
}</pre>登录后复制
</div><p>代码解析</p>
<p>以上的示例代码通过以下几个步骤来实现标签输入框的功能：</p>
<ol>
<li>获取标签输入框和标签容器的 DOM 元素。</li>
<li>定义一个空的数组 <code>tags 来存储用户输入的标签。
监听键盘按下事件，当用户按下回车键时，将输入框的值作为一个新标签添加到 tags 数组中，并且重新渲染标签。
定义 renderTags 函数来渲染标签。它首先清空标签容器，然后遍历 tags 数组，创建标签元素和删除按钮，并将它们添加到容器中。
删除按钮的点击事件监听器允许用户删除标签。它查找被点击的标签在 tags 数组中的位置，并删除该元素，然后重新渲染标签。
以上，我们已经成功地使用 JavaScript 实现了带有添加和删除功能的标签输入框。你可以将以上的代码复制到你的项目中，并与其他文件结合使用来实现更复杂的功能。希望这篇文章对你有所帮助！
广告
243
收藏
