Html 如何使用 JavaScript 隐藏文本区域

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16355475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:06:07  来源:igfitidea点击:

How to use JavaScript to hide a text area

javascripthtmljavascript-eventstextarea

提问by arok

when Click on button textarea appear allowing the user to type the message .after type a message i want textarea to hide.

当单击按钮 textarea 出现时,允许用户键入消息。键入消息后,我希望 textarea 隐藏。

Can any one help me how to hide the textarea after entering the message.

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

This my javascipt code:

这是我的 javascipt 代码:

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

This my html code:

这是我的 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>

回答by Gautam3164

Try like this

像这样尝试

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

It is the simple way of toggling the div using only one function,Ofcourse in JQuery there is only one thing you can do is 'toggle'the div

这是仅使用一个函数切换 div 的简单方法,当然在 JQuery 中,您只能做一件事就是“切换”div

回答by ELAYARAJA

Replace visibility:hiddenwith display: none:

替换visibility:hiddendisplay: none

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

and then show it by setting it to block:

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

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

Additionally, you may want to look at jQuery which makes these kind of things extremely easy.

此外,您可能想看看 jQuery,它使这些事情变得非常容易。

回答by Lingasamy Sakthivel

Try this:

尝试这个:

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

回答by Mark Walters

run this function on the onchangeevent of the textarea

onchange在 textarea的事件上运行此函数

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

This completely removes the textarea so that it is hidden and also takes up no space on the page. If you want to hide it but for the space the textarea takes up to remain use .style.visibility = 'hidden'instead

这将完全删除 textarea 使其隐藏并且也不占用页面上的空间。如果你想隐藏它,但对于空间textarea的占用仍然使用.style.visibility = 'hidden'替代

回答by Thomas Junk

What about setting the display to "none" after the user changed the input of the textarea. You may have a look at http://jsfiddle.net/PnfLS/

在用户更改 textarea 的输入后将显示设置为“无”怎么样。你可以看看http://jsfiddle.net/PnfLS/

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