极客教程如何使用HTML、CSS和JavaScript创建标签输入框
在本文中，我们将使用HTML、CSS和JavaScript创建一个标签输入框。标签输入框是一种用户界面元素，允许用户将各种标签插入到输入框中。为了创建标签输入框，我们使用了一些JavaScript方法createElement()、addEventListener()、preventDefault()、value、keydown。
JavaScript方法：
JavaScript中的createElement()方法用于动态创建指定名称的HTML元素节点。此方法接受元素名称作为参数，并生成元素节点。
addEventListener()方法用于将事件处理程序与特定元素关联起来。它不会替换当前的事件处理程序。事件被认为是JavaScript的重要组成部分。网页对事件做出响应。事件可以由用户或通过API生成。事件监听器是一种JavaScript过程，它等待事件发生。
value属性是JavaScript中表单元素（如input、textarea、select等）的属性。它返回表单元素的当前值。
preventDefault()函数如果可取消事件，则取消该事件，表示事件的默认行为将不会发生。
CSS属性：
border - 这些属性用于定义元素的边框样式、颜色和大小。
border-radius - CSS属性会将元素的外边框边缘圆角化。您可以使用单个半径创建圆形角落，也可以使用两个半径创建椭圆角落。
box-shadow - CSS特性可在元素的框架周围创建阴影效果。可以设置多个效果，用逗号分隔。盒阴影由其X和Y偏移、模糊和扩展半径以及颜色定义。
flex-wrap - 属性确定是否应包装弹性元素。
CSS的 Flex 或 inline-flex 可用作显示属性。当父容器使用show flex 或 inline flex 时，子元素会自动启用弹性内容。
示例1： 在这个示例中，我们首先使用无序列表标签显示结果，然后使用输入标签获取用户的输入。接下来，我们使用一些CSS属性来样式化列表和输入标签。
在Javascript代码部分，我们首先定义了两个变量-tags和input，分别代表无序列表和输入元素。接下来，我们为input元素添加一个事件监听器，监听keydown事件。当用户按下“Enter”键时，我们使用event.preventDefault()阻止事件的默认操作。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.tags-input {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
width: 70%;
}
.tags-input input {
flex: 1;
border: none;
height: 32px;
border: 2px solid crimson;
border-radius: 10px;
}
.tags-input input:focus {
border: none;
}
.tags-input ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 8px 0 0 0;
}
.tags-input ul li {
margin-right: 8px;
margin-bottom: 8px;
padding: 8px;
background-color: #ddd;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="tags-input">
<ul id="tags"></ul>
<input type="text" id="input-tag"
placeholder="Add a tag" />
</div>
<script>
// Get the tags and input elements from the DOM
const tags = document.getElementById('tags');
const input = document.getElementById('input-tag');
// Add an event listener for keydown on the input element
input.addEventListener('keydown', function (event) {
// Check if the key pressed is 'Enter'
if (event.key === 'Enter') {
// Prevent the default action of the keypress
// event (submitting the form)
event.preventDefault();
// Create a new list item element for the tag
const tag = document.createElement('li');
// Set the text content of the tag to the input value
tag.innerText = input.value;
// Append the tag to the tags list
tags.appendChild(tag);
// Clear the input element's value
input.value = '';
}
});
</script>
</body>
</html>
输出：
示例 2： 这个与之前的示例相同，但不同的是，在之前的示例中，我们没有删除输入标签的功能，而在这个示例中，我们添加了一个删除按钮，这样用户就可以删除输入的标签。此外，我们还使用了一些CSS属性来使其更具吸引力。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.tags-input {
display: inline-block;
position: relative;
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px;
box-shadow: 2px 2px 5px #00000033;
width: 50%;
}
.tags-input ul {
list-style: none;
padding: 0;
margin: 0;
}
.tags-input li {
display: inline-block;
background-color: #f2f2f2;
color: #333;
border-radius: 20px;
padding: 5px 10px;
margin-right: 5px;
margin-bottom: 5px;
}
.tags-input input[type="text"] {
border: none;
outline: none;
padding: 5px;
font-size: 14px;
}
.tags-input input[type="text"]:focus {
outline: none;
}
.tags-input .delete-button {
background-color: transparent;
border: none;
color: #999;
cursor: pointer;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="tags-input">
<ul id="tags"></ul>
<input type="text" id="input-tag"
placeholder="Enter tag name" />
</div>
<script>
// Get the tags and input elements from the DOM
const tags = document.getElementById('tags');
const input = document.getElementById('input-tag');
// Add an event listener for keydown on the input element
input.addEventListener('keydown', function (event) {
// Check if the key pressed is 'Enter'
if (event.key === 'Enter') {
// Prevent the default action of the keypress
// event (submitting the form)
event.preventDefault();
// Create a new list item element for the tag
const tag = document.createElement('li');
// Get the trimmed value of the input element
const tagContent = input.value.trim();
// If the trimmed value is not an empty string
if (tagContent !== '') {
// Set the text content of the tag to
// the trimmed value
tag.innerText = tagContent;
// Add a delete button to the tag
tag.innerHTML += '<button class="delete-button">X</button>';
// Append the tag to the tags list
tags.appendChild(tag);
// Clear the input element's value
input.value = '';
}
}
});
// Add an event listener for click on the tags list
tags.addEventListener('click', function (event) {
// If the clicked element has the class 'delete-button'
if (event.target.classList.contains('delete-button')) {
// Remove the parent element (the tag)
event.target.parentNode.remove();
}
});
</script>
</body>
</html>
输出
