スマートフォンなどで打ち込み途中の文字を一時的に保管できますか？

お世話になります、石井と申します。スマートフォンなどで名前の姓、名を打ち込み後に変換→確定の順番に操作をされる思いますが、変換前のひらがな状態を一時的にjavascriptかPHPでブラウザー保管出ますでしょうか？保管したものを呼び出して”かな”に表示させようとしてます。もし方法があれば教えていただきたいです。
よろしくお願いします。

行動規範の内容に同意します

回答2件

日本語変換への入力途中の文字を取得する方法としてJavaScriptにはCopmositionEventというのがあります。
MDN:CompositionEvent
compositionstartではじまり、未確定文字入力や部分変換とかする度にcompositionupdateが呼ばれ、確定後にcompositionendが呼ばれます。これらのeventでは、入力途中や変換前の文字列が入っているので、変換前の文字列も取得できます。これらを工夫すれば、変換前の文字列を取得できるかと思います。
ただし、注意事項があります。

最新のスマホであれば大丈夫だと思いますが、全てのブラウザで対応しているとは限りしませんし、中には制限や動作が異なるモノががあったりします。
eventのコールバックで取得できる文字列について、変換前の文字なのか、変換中の文字なのか、変換後の文字なのかは区別できません(判るのは現在変換の途中なのか、確定後なのかだけです)。自分で変化を確認しながら、変換前や変換後を予測する必要があります。

たとえば、「ashitanotennki[SPACE][Enter]」と入力したとすると

compositionstart: "" // ここは現在選択されている文字列が入ります。
compositionupdate: "あ"
compositionupdate: "あｓ"
compositionupdate: "あｓｈ"
compositionupdate: "あし"
compositionupdate: "あしｔ"
compositionupdate: "あした"
compositionupdate: "あしたｎ"
compositionupdate: "あしたの"
compositionupdate: "あしたのｔ"
compositionupdate: "あしたのて"
compositionupdate: "あしたのてｎ"
compositionupdate: "あしたのてん"
compositionupdate: "あしたのてんｋ"
compositionupdate: "あしたのてんき"
compositionupdate: "明日の天気"
compositionend: "明日の天気"

というような形になります(ブラウザによって異なる場合もあります)。部分確定とかBACKSPACEとか入るとさらに複雑になります。
※上はローマ字入力の場合です。フリック入力だとローマ字入力の途中がなくなるだけですが、トグル入力だとまた別の様相になります。

投稿2015/10/16 12:28

raccy

総合スコア21735

退会済みユーザー

2015/10/19 01:02

raccyさん、回答ありがとうございます。参考にさせていただきます。

行動規範の内容に同意します

色々考えてみたのですが・・
・変換された時のイベントが取れない
・名前が漢字とは限らない
・予測変換から入力した場合は完全なひらがなを取れない
といった問題から、対応するのはかなり難しいと思います。
簡単にスクリプトを書いてみましたが、完全には対応できませんでした。

下記のスクリプトは
・ひらがなで入力される
・名前は全て漢字
・読みを全て入力してから変換する。(さ→佐藤という変換は考慮しない)
という前提で作成しました。

※実戦で使える品質ではないので参考までに。。。

html
1姓<input type="text" id="js-sei">
2姓(かな)<input type="text" id="js-sei-kana">

javascript
1$(function() {
2    var kana = '';
3    $('#js-sei').on('keydown blur', function() {
4    	var input = $(this).val();
5        if(input === '') {
6			$('#js-sei-kana').val('');
7            kana = '';
8            return;
9        }
10        if(input.match(/^[ぁ-ん]+$/)) {
11            // 入力文字が全てかなの場合は変換前と判断
12            kana = input;
13        } else if(input.match(/^[一-龥]+$/) && kana !== '') {
14            // 入力文字が全て漢字の場合は変換されたと判断
15            $('#js-sei-kana').val(kana);
16        }
17    });
18});