如何使用JavaScript隐藏文本区域

时间:2013-05-03 09:19:38

标签: javascript html javascript-events textarea

当点击按钮textarea出现时允许用户输入消息。在输入消息后我想要textarea隐藏。

任何人都可以在输入信息后帮助我隐藏文本区域。

这是我的javascipt代码:

        <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>

5 个答案:

答案 0 :(得分:8)

试试这个

<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中使用Ofcourse,只有一件事你可以做的是'切换' div

答案 1 :(得分:1)

visibility:hidden替换为display: none

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

然后通过将其设置为阻止来显示它:

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

另外,你可能想看一下使这些事情非常简单的jQuery。

答案 2 :(得分:0)

试试这个:

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

答案 3 :(得分:0)

在textarea

onchange事件上运行此函数
function hideMe(){
   document.getElementById('welcomeDiv1').style.display = "none";
}

这样就完全删除了textarea,使其隐藏起来,并且不占用页面上的空间。如果你想隐藏它,但是对于空间,textarea需要保持使用.style.visibility = 'hidden'而不是

答案 4 :(得分:0)

在用户更改textarea的输入后,如何将显示设置为“none”。 您可以查看http://jsfiddle.net/PnfLS/

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