enchant.jsで文字入力する方法と、キャレット移動への対応の要点まとめ

先日予告していた、下記コードの要点を解説、まとめました。

キーの押下を確かめる

var keyState = [];
document.onkeydown = function (e) {
    keyState[e.keyCode] = true;
    return true;
};
document.onkeyup = function (e) {
    keyState[e.keyCode] = false;
    return true;
};

通常、キーが押された時にイベントが呼び出されますが（document.onkeydown = hoge）、あるタイミングで
「今、キーが押されているか」
を確かめるには、この方法が有効です。

キーが押されている間だけ、変数keyState[(キーコード)]がtrueになります。

enchant.jsで文字入力

//入力フォームを作成
var input = new Label(	//入力フォーム
    "<form name='hoge'>" +
    "<input type='text' name='text'>" +
    "</from>"
);
game.rootScene.addChild(input);	//シーンに追加

Labelは面白いオブジェクトで、htmlタグをそのまま書き込むことができます。改行したい場合は br 、画像表示したい場合は img が使えます。
やりようによっては結構面白いことが出来るのではと思います。

enchant.jsでの文字入力 - ４１６番地

アクティブな要素を取得

var element = document.activeElement;//フォーカスの当たっている要素を取得

キャレット（文字入力のカーソル）の操作

プロパティ	値
要素.selectionStart	選択範囲の最初の位置
要素.selectionEnd	選択範囲の最後の位置

要素.selectionStart ～ 要素.selectionEnd の間が選択範囲になる。

テキストを選択していない（文字が反転していない）時は、
要素.selectionStart == 要素.selectionEnd