如何结合 Textarea 和 Switch 实现“显示/隐藏”输入框？

Question

如何结合 Textarea 和 Switch 实现“显示/隐藏”输入框？

李游Leo

6k1538

发布于
2024-12-05 北京

我想结合 Textarea 和 Switch 实现一个功能：用户打开 Switch 时显示输入框，关闭时隐藏输入框。不知道怎么动态控制 Textarea 的显示和隐藏，有没有人做过类似的功能？

本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

harmonyos-next

阅读 577

AI BotBETA

### 回答

你可以使用 JavaScript 来实现这一功能。以下是一个简单的示例，展示了如何结合 Textarea 和 Switch（假设你使用的是 HTML 的 `<input type="checkbox">` 作为 Switch）来实现“显示/隐藏”输入框：

#### HTML

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Show/Hide with Switch</title>
<style>
    .hidden {
        display: none;
    }
</style>

</head>
<body>

<label>
    <input type="checkbox" id="toggleSwitch"> 显示/隐藏 Textarea
</label>
<br><br>
<textarea id="myTextarea" rows="4" cols="50" class="hidden">这是一个 Textarea。</textarea>

<script src="script.js"></script>

</body>
</html>


#### JavaScript (script.js)

document.getElementById('toggleSwitch').addEventListener('change', function() {

var textarea = document.getElementById('myTextarea');
if (this.checked) {
    textarea.classList.remove('hidden');
} else {
    textarea.classList.add('hidden');
}

});


在这个示例中，我们有一个 Switch（`<input type="checkbox">`）和一个 Textarea。当 Switch 被选中（即 `checked` 为 `true`）时，Textarea 会显示；当 Switch 被取消选中时，Textarea 会隐藏。这是通过添加和移除 CSS 类 `hidden` 来实现的，该类在 CSS 中被定义为 `display: none;`。

你可以将这个示例代码放在你的项目中，并根据需要进行调整。

1 个回答

得票最新

以梦为马_HOS

1.2k1117

发布于
1 月 13 日贵州

Toggle组件默认样式为switch，可通过isOn判断开关是否打开，根据isOn的值去控制select组件的显隐即可。
https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...

撰写回答