请给我一个完整的html文件,实现textarea与标签组合,点击标签填入标签内容
时间: 2023-12-14 19:38:04 浏览: 132
HTML中的文本框textarea标签
5星 · 资源好评率100%
以下是一个简单的HTML文件,实现了一个文本框和标签选择器的组合。当用户点击标签时,标签的内容会自动填入文本框中。
```html
<!DOCTYPE html>
<html>
<head>
<title>Textarea and Tag Selector</title>
<style>
label {
display: inline-block;
margin-bottom: 10px;
font-weight: bold;
}
textarea {
width: 100%;
height: 200px;
}
button {
margin-top: 10px;
}
.tag-selector {
display: inline-block;
border: 1px solid #ccc;
padding: 5px;
margin-right: 10px;
cursor: pointer;
}
.tag-selector:hover {
background-color: #eee;
}
</style>
</head>
<body>
<label for="text">Text:</label>
<textarea id="text"></textarea>
<label for="tags">Tags:</label>
<div>
<span class="tag-selector" data-value="Hello">Hello</span>
<span class="tag-selector" data-value="World">World</span>
<span class="tag-selector" data-value="HTML">HTML</span>
<span class="tag-selector" data-value="CSS">CSS</span>
<span class="tag-selector" data-value="JavaScript">JavaScript</span>
</div>
<button onclick="insertTag()">Insert Tag</button>
<script>
function insertTag() {
var textArea = document.getElementById('text');
var selectedTag = document.querySelector('.tag-selector.selected');
if (selectedTag !== null) {
textArea.value += selectedTag.getAttribute('data-value') + ' ';
}
}
var tagSelectors = document.querySelectorAll('.tag-selector');
for (var i = 0; i < tagSelectors.length; i++) {
tagSelectors[i].addEventListener('click', function() {
var selectedTag = document.querySelector('.tag-selector.selected');
if (selectedTag !== null) {
selectedTag.classList.remove('selected');
}
this.classList.add('selected');
});
}
</script>
</body>
</html>
```
这段代码包含了一个文本框和一些标签选择器。当用户点击标签时,通过JavaScript代码将标签的内容添加到文本框中。
阅读全文