onKeyPress show Textarea box

Question

OnKeypress is not working when i click on input type field its not showing inputtextarea.

<input type="Text" onKeyPress="myFunction()" styleClass="slds-input" value="enter email" id="intag"/>

 <apex:inputTextarea cols="100" rows="10"  id="textareaMsg" value=" {!msgbody}"/>

 <script>
    function myFunction() {
      document.getElementById('textareaMsg').show();
     }
</script>

Answer 1

This might help. This worked for me >

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="Text" onKeyPress="myFunction()" styleClass="slds-input" value="enter email" id="intag"/>

<apex:inputTextarea cols="100" rows="10"  id="textareaMsg" value="{!msgbody}" style="display:none" styleClass="testtextarea" />

 <script>
 function myFunction() {
  alert('key press working');
  $(".testtextarea").show();
}
</script>

Answer 2

The onkeypress event occurs when the user presses a key (on the keyboard). In your case use onclick event. Use style.display = 'block' instead of show(). Javascript querySelector is more recommend than jquery $.

<apex:page>
    <script>
        function myFunction() {
            debugger;
            document.querySelector("[id*='textareaMsg']").style.display='block';
        }
    </script>
    <apex:form>
        <input type="Text" onClick="myFunction()" value="enter email" id="intag"/>

        <apex:inputTextarea cols="100" rows="10"  style="display:none"  id="textareaMsg"/>
    </apex:form>
</apex:page>