JavaScriptで簡易スプレッドシート　サンプル紹介　その２

松本 (2011年12月20日 14:24)
システム開発事業部

前回に引き続き、JavaScriptで作った簡易スプレッドシートのサンプルを紹介します。

前回は、矢印でのセル移動と、
最終行で「↓」キー押下で、行を追加する処理を実装したサンプルでしたが、
今回は、「セルを選択する」機能を紹介します。

この機能のコンセプトは、「Excelライクな操作感」です。
というわけで、完全にExcelと同じ！とは言えませんが、以下の仕様で作成しました。

------------------------------------------------------------------------------------
＜セル選択機能の仕様＞
１) F12キー押下/またはマウスダブルクリックで、セルを選択
　（テキストボックスの背景色を黄色にします）

２) Enterキー押下で、セルの選択解除

３) セルの選択中は、矢印キー押下でセルの移動ではなく、
　　テキストボックス内の文字列のカーソル位置移動

４) 選択していないセルにフォーカスが当たった場合、
　　テキストボックス内の文字列を全選択

５) セル選択した際、テキストボックス内の文字列の最後にカーソルを移動
------------------------------------------------------------------------------------

４) については、既に前回のHTMLに記載済みですが、
テキストボックスにフォーカスがあたったときに、値をselectするよう以下のコードを書くだけです。

　　　onFocus="this.select();"

５) については、createTextRangeを使います。

　　　// 文字列の長さを取得
　　　// ※obj は、テキストボックスです。
　　　var iLastLen = parseInt(obj.value.length);
　　　var range = obj.createTextRange();
	
　　　obj.focus();
　　　// 最後の位置へ移動
　　　range.move('character', iLastLen);

やはり、自分で色々とコードを書くと勉強になりますので、
特にJavaScriptを勉強し始めたい方、このサンプルを改造して色々と試してみてください。

今回のサンプルは、こちらから一括でダウンロード可能です。

※前回のサンプルの機能＋セル選択機能追加版です。
※SpreadSample.htmlファイルを、IEで起動してください。
※Zipファイルです。
※このサンプルは、IEでしか動作確認をしていません。
　キーイベントを取得して制御しているので、
　他のブラウザだと動作しない可能性がありますので、ご注意下さい。

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

JavaScriptで簡易スプレッドシート　サンプル紹介　その２

システム開発のアイロベックスは、創業23年を迎える
プロフェッショナル集団です。