正文

揭秘Bootstrap textarea赋值技巧，轻松实现动态内容填充

/0 浏览量
0313

引言

Bootstrap 是一个流行的前端框架，它提供了许多实用的组件来帮助开发者快速构建响应式网页。在 Bootstrap 中，textarea 组件是表单元素的一种，常用于输入多行文本。本文将揭秘 Bootstrap textarea 的赋值技巧，帮助您轻松实现动态内容填充。

Bootstrap textarea 基础

在 Bootstrap 中，textarea 组件可以通过简单的 HTML 代码实现。以下是一个基本的 textarea 示例：

<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>

这个 textarea 将具有基本的样式，并具有 3 行高度。

动态填充 textarea 内容

要动态填充 textarea 内容，您可以使用 JavaScript 来操作 DOM。以下是一个简单的示例，展示如何使用 JavaScript 在页面加载时填充 textarea：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap textarea 动态填充</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
  <label for="exampleTextarea" class="form-label">多行文本输入</label>
  <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var textarea = document.getElementById('exampleTextarea');
  textarea.value = '这里是动态填充的内容。';
});
</script>

</body>
</html>

在上面的代码中，我们使用 document.addEventListener 监听 DOMContentLoaded 事件，这意味着当文档加载完成时，我们会执行一个函数。在这个函数中，我们通过 getElementById 获取到 textarea 元素，并使用 value 属性设置其内容。

高级技巧：使用 jQuery

如果您熟悉 jQuery，可以使用它来简化操作。以下是一个使用 jQuery 的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap textarea 动态填充（jQuery）</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>

<div class="container mt-5">
  <label for="exampleTextarea" class="form-label">多行文本输入</label>
  <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>

<script>
$(document).ready(function() {
  $('#exampleTextarea').val('这里是动态填充的内容（使用 jQuery）。');
});
</script>

</body>
</html>

在这个例子中，我们使用 $(document).ready 函数来确保 DOM 完全加载后再执行代码。然后，我们通过 jQuery 的选择器 $('#exampleTextarea') 来获取 textarea 元素，并设置其 val 属性。

总结

通过上述示例，我们可以看到，使用 Bootstrap 和 JavaScript（或 jQuery）可以轻松地实现 textarea 的动态内容填充。掌握这些技巧，可以让您的网页表单更加灵活和强大。

-- 展开阅读全文 --