2018/04/09更新

[フロントエンド] 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言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。