How to use a textbox with html5 canvas (and hide it when not needed)

Question

I am making a html5 game and need to get input from a textbox. I have read that that I should make the textbox outside of the canvas instead of inside it, but I am not sure how I would go about that.

At some points in the game, I need the text box to be hidden. For example hide textbox when in main menu.

Answer 1

To put the textbox outside canvas, just use a HTML input element:

<canvas id = "the-canvas"></canvas>
<input id = "the-textbox" type = "text">

You can retrieve the value typed in the input field using

document.getElementById("the-textbox").value 

And to hide or show the input element, use:

//hide it
document.getElementById("the-textbox").style.display = "none";

//show it
document.getElementById("the-textbox").style.display = "inline"; //or inline-block

You'll find more info on MDN input page

Answer 2

Here you have a basic example with a textfield and a toggle button. You may need: JavaScript and jQuery in order to do so.

http://jsfiddle.net/f98Xx/

<textarea id="myinput"></textarea>
<input type=button value=get name=get>
<input type=button value=toggle name=toggler>
<script>
$(function(){
    $("input[name=toggler]").click(function(){
        $("textarea#myinput").toggle();
    });

    $("input[name=get]").click(function(){
        var value = $("textarea#myinput").val();
        alert( value ); 
    });
});
</script>