html5 canvas kinetic textbox

Question

ユーザがonclickイベントに入力するためのテキストボックスを開く方法があるのでしょうか？これをどうやって作るの？ユーザーがキャンバスに入力した内容を取得し、テキストを出力するために私が読んだ方法を使用する方法があるかもしれないと思っています。これは可能でしょうか？しかし、私はどのようにユーザーが最初にキャンバスに入力することができますか？

私はたくさんの読書をしましたが、私が見つけることができるすべての例は、テキストボックスを作成するのではなく、単にキャンバスにテキストを出力することでした。

アイデア？

Answer 1

単純な解決策 - Javascriptの警告ボックスを使用します。これにより、ユーザーが画面上に配置したいテキストをつかむことができます。次にキャンバス上にテキストを書いてください（キャンバスにテキストを書く方法についてのチュートリアルがたくさんあります）。

Answer 2

あなたは文字通りのonclickイベントが発生するのように、1を作るために持っていて、実行します。var myInput = document.createElement("textarea");

あなたがそれを置く、その後、"absolute"にmyInput.style.width、height、top、left、そしてもちろんのmyInput.style.positionを設定する必要がありますユーザーが期待する場所。

イベントを割り当てる必要があります。おそらくkeydownでEnterキーが検索され、Enterキーが押されると、コミットしたければテキストは消えてコミットされます。

次に、ページに追加します。

ぼかしイベントで同じことを行うことがあります（ユーザーがクリックした場合）。

Answer 3

キャンバスはビットマップイメージです。要素を「その中に」置くことはできません。あなたはそれの上に1つのホバリングを置くことができます。あなたが探していると思うのは、html5 contenteditable attributeです。