日本語入力 確定 時に イベント を発生させる jQuery プラグイン

JavaScript で 日本語入力 ON のときの 確定イベント(日本語変換が終わって入力済みを意味する Enterキー 入力) を取得する jQuery プラグイン を作ってみました。 日本語入力中はイベントを発火せず、フォームとして入力が終わって確定する Enterキー入力 で イベント を発火する jQuery プラグイン です。

参考までにですが…日本語入力 ON と OFF のときの Enterキー の挙動については以下のようになります。 keypress があるかないかが 日本語入力中かどうか を判定するポイントになります。

IME変換中の Enterキー

keydown → keyup

IME変換しない Enterキー

keydown → keypress → keyup

目次

• デモ
• プラグイン
• 利用方法

デモ

入力欄に記載された文字列を出力欄に出力するという単純なデモです。 「確定」ボタンを押下することでも出力できますが、ここではテキストボックス内で Enterキー 入力をすることでも「確定」ボタン押下と同じ挙動になることをデモします。

入力

出力

プラグイン

テキスト入力の確定時にイベントが発火する jQuery プラグイン サンプルコード jquery.complete.js を以下に掲載します。 日本語入力中の [Enter] ではイベントが発生せず、入力が確定した時の [Enter] でイベントが発生します。

jquery.complete.js

(function (window, document, $, undefined) {
    /**
    * テキスト入力が確定したとき指定されたイベントハンドラを呼び出します。
    * @param    handler     {function}  イベントハンドラ。イベントハンドラは jQuery.Event を引数にとる。
    * @return   {jQuery}    jQueryオブジェクト
    */
    $.fn.complete = function (handler) {
        var ENTER_KEY = 13;
        var keypressed = false;

        /**
        * keypressイベント発生時に呼び出されます。
        * @param    event   {jQuery.Event}  イベントオブジェクト
        */
        var onkeypress = function (event) {
            if (event.keyCode !== ENTER_KEY) {
                return;
            }
            keypressed = true;
        };

        /**
        * keyupイベント発生時に呼び出されます。
        * @param    event   {jQuery.Event}  イベントオブジェクト
        */
        var onkeyup = function (event) {
            if (event.keyCode === ENTER_KEY && keypressed) {
                // 入力確定のイベントを発生させます。
                handler.call(this, event);
            }
            keypressed = false;
        };

        // 各要素に対してイベントを付与します。
        return this.each(function (index) {
            $(this).on('keypress', onkeypress).on('keyup', onkeyup);
        });
    };
})(window, document, jQuery);

利用方法

上述 jquery.complete.js を利用するサンプルコードを以下に掲載します。

利用例

$('input[type=text]').complete(function (event) {
    var txt = $(this).val();
    $('#comp').html(txt);
});

関連記事

• JavaScript における 日本語入力 確定 (Enter) イベント

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter