【jQuery】textareaにて Alt + ;(セミコロン)で現在日を挿入

Posted by admin on 2010年12月9日

Ｅｘｃｅｌの便利機能として、Alt + ;(セミコロン)キーを同時押しすると、カーソル位置に現在日が挿入されるというものがある。

個人的には、かなり常用している機能で、OSに標準搭載されて欲しいレベルだったりする。

で、jQueryを使ってhtmlのtextareaにも同じような機能を搭載してみようと考えた。

まずはキーイベントを手軽に処理してくれるプラグイン

jquery.hotkeys

$(“textarea”).bind(‘keydown’, ‘ctrl+c’, ここにfunction);

なんてやるだけで、複合したキーイベントでも簡単に処理できるナイスな奴だ。

ただし、このプラグインの問題として、対象要素がドキュメント中に1つも無かった場合、スクリプトエラーを起こしてしまう。

しょうがないんで、判定を加えておく。

var txtareas = document.getElementsByTagName(“textarea”);

if (txtareas != null && txtareas.length > 0) {

$(“textarea”).bind(‘keydown’, ‘ctrl+c‘, function() {

ここに処理

});

}

そして残念な事に、このプラグイン、;(セミコロン)キーには対応していないらしい。

ソースを除いたら、無理やりバインドできそうな雰囲気だったので、無理やりバインドしてみる。

if (jQuery.browser.mozilla) {

// firefox用

hotkeys.specialKeys[“107”] = “;”;

} else {

hotkeys.specialKeys[“187”] = “;”;

}

IEとchromeはセミコロンのキーコードが同じなんだけど、firefoxはキーコード違うみたい。

他のブラウザでも違うものがあるかもしれないけど、まぁただの便利機能だし、主要3ブラウザ以外に関してはこの際(ﾟεﾟ)ｷﾆｼﾅｲ

さて、あとはカーソル位置（キャレット位置）に、現在日を挿入する処理。

と思ったら、textareaのカーソル位置に文字を挿入するのって、jQuery標準ではできないし、意外に面倒らしい。

調べてみたら、こんなソースを発見。

テキストエリアの現在のカーソル(キャレット)位置に文字を挿入するには

完成度が高く、まるごとコピペしただけで、とても綺麗に動いた。

で、これらを組み合わせたら最終的にこんな感じになった

// キャレット位置に文字を挿入

$.fn.extend({

insertAtCaret: function(v) {

var o = this.get(0);

o.focus();

if (jQuery.browser.msie) {

var r = document.selection.createRange();

r.text = v;

r.select();

} else {

var s = o.value;

var p = o.selectionStart;

var np = p + v.length;

o.value = s.substr(0, p) + v + s.substr(p);

o.setSelectionRange(np, np);

}

}

});

// 日本語で本日日付を取得

function getJaToday() {

var d = new Date();

var m = d.getMonth() + 1;

return d.getFullYear() + “年” + m + “月” + d.getDate() + “日”;

}

$(function() {

if (jQuery.browser.mozilla) {

hotkeys.specialKeys[“107”] = “;”;

} else {

hotkeys.specialKeys[“187”] = “;”;

}

var txtareas = document.getElementsByTagName(“textarea”);

if (txtareas != null && txtareas.length > 0) {

$(“textarea”).bind(‘keydown’, ‘alt+;’, function() {

$(this).insertAtCaret(getJaToday() + “\n”);

});

}

});