html5画布动力学文本框答案

【问题标题】：html5 canvas kinetic textboxhtml5画布动力学文本框
【发布时间】：2012-03-13 22:46:42
【问题描述】：

我想知道是否有办法打开一个文本框供用户在 onclick 事件中输入？我该怎么做呢？我现在在想，我可能有一种方法可以获取用户在画布上键入的内容，并使用我读过的方法来输出文本。这是一种可能吗？但是我如何让用户首先在画布上打字呢？

我已经阅读了大量内容，我能找到的所有示例都是关于将文本简单地输出到画布上而不是创建文本框。

有什么想法吗？

【问题讨论】：

【解决方案1】：

一个简单的解决方案 - 使用 Javascript 的警报框。这将使我们能够抓取用户想要放置在屏幕上的文本。然后在画布上随心所欲地书写文本（许多关于如何在画布上书写文本的教程）。

【讨论】：

【解决方案2】：

canvas 是位图图像。您不能将元素“放入其中”。不过，您可以将一个悬停在它上面。我认为您正在寻找的是html5 contenteditable attribute。

【讨论】：

【解决方案3】：

你必须真正地做一个，就像在 onclick 事件触发时你做的那样：var myInput = document.createElement("textarea");

您需要将myInput.style.width、height、top、left，当然还有myInput.style.position 设置为"absolute"，然后将其放置在用户期望的位置。

然后你需要给它分配事件。也许在 keydown 上它会寻找 Enter 键，如果按下 Enter 键，它将消失并提交文本，但你希望它提交。

然后将其添加到页面中。

也许它会在模糊事件上做同样的事情（如果用户点击离开）。

【讨论】：