CMS（WordPress）などの技術ブログ

エディタとか使う方はTabキーでインデントをガンガンつけている事と思います。
私も普通のメモもエディタで書く時はよくTabキーを使います。

そんな状況なので、Webツールや入力フォームで戸惑う事があります。
入力して複数行を一気にタブでインデントしようとして削除してしまうのです。
こういう人、結構いると思います。
テキストエリアにタブが入力できると、色々便利です。
（逆に使いづらいって場合もありますが、、）

JavaScriptを使ってタブキーを入力するとタブを入力するショートカットキーを作っても良いのですが、
中途半端にショートカットを入れるとそのページでは全てタブが使えなくなって不便です。
地道に作っても良いんですが、結構気が効いたプラグインがあったのでご紹介。

Webページのテキストエリアでタブが入力できるプラグイン

tabIndent.js

デモ画面です。ダウンロードのセットに入ってます。
こんな風に複数行を選択してタブが挿入できますよ。

通常サイトには余り必要無いですが、Developper向けのツール等を作る場合は便利そうです。
近々弊社のサイトにも導入してみます。

Web画面にショートカットキーを実装する方法をご紹介。
取り立てて目新しい話では無いですが、ショートカットキーを実装する機会があったのでメモしておきます。
ショートカットキーを取り入れたい方はご参考ください。

ちなみにサンプルコードはjQueryを使った書き方をしていますが、両方ともjQueryは不要です。
ご自身の環境によって読み替えて下さいね。

1. JavaScriptで一から書く方法

ちょっと追加したいだけ、であれば自分で書くのが早いです。
Ctrlボタンとかと合わせて複合キーによるショートカットを使いたい場合は、後述のプラグインを使ったほうが良いです。

サンプルの説明
「q」のキーを押したら「#shortcut_button」というidのHTML要素をクリックするイベントを発生させます。
ショートカットキーを追加したい場合は、case文を追加していけばOKです。

$(document).keydown(function(e) {

	switch (e.keyCode) {

		case 76:
			// Key: l
			$("#shortcut_button").click();
			break;
	}

});

この方法の場合、キーコードを数値で指定する必要があります。
キーコードを手っ取り早く知るには、What The Key Code?というサイトが便利。
何かキーを押すと、画面にキーコードが表示されます。


2.JavaScriptのプラグインを使う方法

shortcut.jsを使うと複合キーによるショートカットも簡単に実装できます。

使い方は簡単。

まずプラグインを読み込みます。

<script type="text/javascript" src="/js/shortcut.js"></script>

あとはJavaScriptで下記のように記述するだけ。
これで「Ctrl+Enter」をクリックするショートカットキーが作れます。

$(function() {

	shortcut.add("Ctrl+Enter",function() {
		$("#button").click();
	});
	
});

MOUSETRAPというプラグインもなかなか良さ気です。
こちらは自分で試してないので、使えるかどうかは不明ですが、一応メモしておきます。

縦や横に長いページの場合、スクロールしてもヘッダーやサイドメニューの位置は固定しておきたい場合があります。ちょうどExcelの「ウィンドウ枠の固定」を設定した状態の事です。普通のWebサイトで横にスクロールするようなケースは無いかもしれないですが、ちょっとそういうページを作る機会があり調べたのでエントリーしておきます。

固定ヘッダーを作りたい場合は、「position:fixed」で実現できます。横にも長いページがある場合、position:fixedで固定してしまうと、画面から横にはみ出た部分が一生表示されません。position:fixed は画面内の絶対位置を指定するスタイルなので、スクロールするという概念が無いのです。

つまり、縦にも横にも長いページのヘッダーを作りたい場合、
「縦にスクロールした場合は固定したいが、横にはスクロールできる」事が必要なのです。

で、調べたあげく、これを実現するjQueryのプラグインが存在しました。
かなりニッチなプラグインですが、こういうマニアックなものは嫌いではないです。

gpFloat

前置きが長くなりましたが、言葉で説明すると長くなりますので、
デモページを作っておきましたのでご参考下さい。

DEMO


固定したい要素は普通にposition:fixedで固定しておいて、
下記のように記述しておくと横だけスクロール可能です。

このようなHTMLがあったとして、「header」を縦だけ固定したいとします。

<div id="wrapper">
	<div id="header"></div>
	<div id="main">
		<div id="sidemenu"></div>
		<div id="content"></div>
	</div>
</div>

headerは position:fixed を指定。

#wrapper { position: relative; }
#header { position: fixed; }

後はこのように記述するだけです。

<script>
$('#header').gpFloatX();
$('#sidemenu').gpFloatY();
</script>