Question

我正在制作一个html5游戏，需要从文本框中获取输入。我已经读过，我应该在画布之外而不是在画布里面制作文本框，但我不确定我会怎么做。

在游戏的某些方面，我需要隐藏文本框。例如，在主菜单中隐藏文本框。

Answer 1

要将文本框放在画布外，只需使用HTML输入元素：

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

您可以使用

检索输入字段中输入的值

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

要隐藏或显示输入元素，请使用：

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

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

您可以在MDN input page

找到更多信息

Answer 2

这里有一个带文本字段和切换按钮的基本示例。您可能需要：JavaScript和jQuery才能这样做。

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>

如何使用带有html5画布的文本框（并在不需要时隐藏它）

2 个答案: