[フロントエンド] input要素のエンターキー制御で、日本語変換のエンターキーを考慮する

こんにちは、@yoheiMuneです。
今日は、input要素でエンターキー押下時に処理を行いたい場合に、日本語変換を考慮する実装方法を、ブログに書きたいと思います。

目次

何がしたいのか

<input type="text"/>で、エンターキーを押された場合に何らかの処理（検索処理など）を行いたいという要件が時々あります。例えばログイン情報を入力して、エンターキーを押せば（わざわざサブミットボタンを押さなくても）ログイン処理を行うことができる、といった具合です。

英語などの変換が必要ない言語であればkeyUpイベントのみを扱えば良いのですが、日本語などの入力変換が必要な（ひらがなを漢字に変換する）場合には、それを考慮して実装する必要があります。今日はその実装方法をブログに書きました。

日本語変換を考慮したエンターキー制御の実装

エンターキーの制御について、keydownイベントとkeyupイベントの2つを使うことで、そのエンターキーが日本語変換のためのものか否かを判断することができます。

// 対象のinput要素.
var $input = $('input')

// keydown時のキーコードを保存する変数.
var keyDownCode = 0

// keydownイベント.
$input.keydown(function (e) {
    // 押下されたキーコードを取得.
    keyDownCode = e.which
})

// keyupイベント.
$input.keyup(function (e) {
    // keydown時とkeyup時のキーコードをがエンターキー（=13）であるかを確認する.
    // どちらも「13」であれば、日本語入力確定した状態でのエンターキー入力.
    // 一致しない場合は、日本語の変換などのためのエンターキー入力.
    if ( 13 == e.which && e.which == keyDownCode ) {

        // 通常のエンターキー操作（日本語変換では無い）ので、
        // エンターキー押下時の処理を実行する.
        doSomething()
    }
    return false
})

日本語変換だとkeydownとkeyup時のキーコードが違うので、それをチェックすれば良いです。

最後に

お仕事で使う必要があって初めて調べました。日本語を扱う場合にはちょっとした工夫が必要なんですね！

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Linux、Python、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！