如何使用JavaScript隐藏文本区域

Question

当我点击按钮时，会出现一个文本区域，让用户输入信息。输入完信息后，我想隐藏文本区域。

请问如何在输入信息后隐藏文本区域？

以下是我的JavaScript代码：

        <script>
        function showDiv1() {
        document.getElementById('welcomeDiv1').style.display = "block";
                            }
        </script>

这是我的HTML代码：

       <div> <span style="display: inline-block;text-align: center; margin:-73px 0px -10px 61px; "><a href ="#"><img src="/wp-content/uploads/2013/03/reject_5.jpg" width="60" height="60" style="margin:0px 0px 0px 0px"  value="Show Div" onclick="showDiv()"/></a><br />Decline</span></div>
       <textarea id="welcomeDiv"  style=" display:none; border:1px solid #666666; height:70px; margin:16px 0 0 8px " class="answer_list" title="Message to Employer" onFocus="this.value=''" > Message to Employer </textarea>

- arok

Answer 1

试着这样做

<script>
    function showDiv1() {
        var my_disply = document.getElementById('welcomeDiv1').style.display;
        if(my_disply == "block")
              document.getElementById('welcomeDiv1').style.display = "none";
        else
              document.getElementById('welcomeDiv1').style.display = "block";
     }
</script>

使用一个函数简单地切换div的方法是，当然在JQuery中你唯一能做的事情就是“toggle”这个div。

- GautamD31

---

根据OP的说法，他希望在Textarea的值发生变化后隐藏它，而不是再次单击按钮时隐藏它。我也更喜欢使用.style.display != "none"来显示它，以防显示属性未设置为== ""。 - Mark Walters

他问道：“在他完成消息后”，所以我们可以假设他会点击它... - GautamD31

Answer 2

将 visibility:hidden 替换为 display: none：

<textarea name="txtReason" id="txtReason" style="display: none;" class="textboxmulti">
</textarea>

然后通过将其设置为块级元素来显示它：

this.form['txtReason'].style.display = 'block';

此外，您可能希望查看jQuery，它可以使这些事情变得非常容易。

- ELAYARAJA

Answer 3

试试这个：

document.getElementById('welcomeDiv1').style.visibility = "hidden";

- Linga

Answer 4

在文本区域的 onchange 事件上运行此函数。

function hideMe(){
   document.getElementById('welcomeDiv1').style.display = "none";
}

这将完全删除文本区域，使其隐藏并且在页面上不占用任何空间。如果您想要隐藏它但是保留文本区域占用的空间，请使用.style.visibility = 'hidden'

- Mark Walters

---

"style.display ="none"和style.visibility = "hidden"有什么区别？如果我们使用display:none，当表单提交后，textarea的内容会被提交吗？" - asim-ishaq

@asim-ishaq，你说得没错，使用 display="none" 不会提交表单。在这种情况下，使用 visibility = "hidden" 是有益的，可以将 CSS 的 position 属性设置为 absolute 以实现相同的视觉效果。 - Mark Walters

Answer 5

关于编程，将显示设置为“none”以在用户更改文本区域的输入后隐藏它。您可以查看http://jsfiddle.net/PnfLS/。

document.getElementById("textbox").addEventListener("change", function(){
document.getElementById("textbox").style.display = "none";
});

- Thomas Junk