Caps Lock や ime-mode を設定する jQuery exCapsLock

タイトルからも想像できますが、地味な jQuery プラグインです。毎度、似たような記述をするのが面倒だったのでプラグイン化してみました。

機能概要

INPUT もしくは TEXTAREA 要素のキー入力で、大文字のみに入力制限したり、キー入力を漢字モードにすることができます。

実装方法

実装は非常に単純で、対象要素に対し CSS の text-transform と ime-mode を当ててるだけです。ただ、text-transform については、見た目は大文字になりますが、内部的には実際入力した値を保持してしまうので、対象要素の blur イベント内で toUpperCase() して大文字変換しています。

ちなみに ime-mode は IE と Firefox3 以降でしか対応してないので、漢字入力モードはその他ブラウザでは適用されません。

使い方

jquery.js、jquery.excapslock.js を読み込みます。

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

大文字入力にしたい場合は、以下のように記述します。

$('input:text').exCapsLock();

漢字入力モードにしたい場合は、以下のように記述します。

$('textarea').exCapsLock({
	capsLock : false,
	imeMode : 'active'
});

Demo

パラメータ

以下パラメータがあります。

api

初期値 : false
true にすると API オブジェクトを返します。

capsLock

初期値 : true
大文字のみの入力に制限します。

imeMode

初期値 : auto
以下値が指定できます。

auto : 何もしない
active : 日本語入力モード
inactive : 英数字入力モード
disabled : 英数字入力モードで且つユーザによるモード変更不可

API

API オブジェクトを使用し、以下メソッドを使用することができます。

capsLockOn(): 大文字のみの入力に制限します。
setImeMode(imeMode): ime-mode のパラメータを指定できます。

ダウンロード

こちらからどうぞ

Permalink | コメント(0) | トラックバック(0)

トラックバック - http://d.hatena.ne.jp/cyokodog/20110217/excapslock01

リンク元

February 17, 2011