Question

当我点击按钮时，我试图让textarea出现，因为我不需要在我的html页面中单独显示它。我使用的东西是：

<textarea cols = "50" rows = "20" name="text" id="text_id" class="form-control" style="resize:vertical" ></textarea>

但这并不能解决我的问题。

知道我该怎么做吗？

我实际上有两个textarea显示现有文件的内容，当我点击一个按钮在一个文本区域中显示内容然后单击第二个按钮以显示第二个textarea的内容时，第一个textarea当我需要同时显示两个textareas中的两个内容时，它变空了！我怎么能这样做？

Answer 1

如果你已经使用过jQuery，你可能会这样做：

<textarea cols="50" rows="20" name="text" id="text_id" class="form-control" style="resize:vertical;display:none"></textarea>
<button class="show_button">Show/hide textarea</button>
<script>$(".show_button").click(function(){$("#text_id").toggle()})</script>

这将切换textarea以显示

我只是假设您正在使用jQuery，因为form-control与Bootstrap一起使用 - 这需要jQuery。

Answer 2

您可以使用简单的javascript甚至jquery。但对于简单的javascript你可以这样做：在head section部分的脚本标记上写：

 <script>
function myFunction() {
    document.getElementById("demo").innerHTML = "<textarea cols = '50' rows = '20' name='text' id='text_id' class='form-control' style='resize:vertical' ></textarea>";
}
</script>

On Body部分：

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Click here</button>

Answer 3

<textarea cols = '50' rows = '20' name='text' id='text_id' class='form-control' style='resize:vertical; visibility:hidden'> </textarea>

<button onClick='document.getElementById("text_id").style.visibility = "visible" '> Click me !</button>

Answer 4

这是我能想到的最紧凑的方法：

我们给 Textarea 一个 CSS 属性以保持隐藏 Display = 'none'。单击按钮后，它会将 css 属性更改为 Display = 'block' 以使其可见。

<textarea cols = "50" rows = "20" name="text" id="text_id" class="form-control" style="resize:vertical; display = 'none'"></textarea>
<button onclick = "document.getElementById('text_id').style.display = 'block'">

单击按钮时会出现Textarea

4 个答案: