スマホ inputタグに対するhideメソッドの挙動未変換の状態（未確定文字）からhideで非表示にした後、showで再表示してみると入力内容が消えている

前提・実現したいこと

JQueryと ruby on rails を使って、チャット型の入力フォームを作成しています。

下記のように、特に平仮名や句点（。）等、未変換の状態でhideメソッドを実行しても、
showメソッドで再表示した際に入力内容を消さないように実装したいと考えています。

発生している問題・エラーメッセージ

画像のように、一部の文字の背景が青色（未変換の状態）で「非表示」を押下してhideメソッドで非表示とすると、
「再表示」を押下してinputタグを再表示させた際に入力内容が全て（変換確定していた部分も含めて）消えてしまう。

該当のソースコード

HTML
1<%= form_for([@hoge, @fuga]) do |f| %>
2 <div class="input">
3   <%= f.text_field :hoge, {id: "text-hoge"} %>
4 </div>
5 <input type="button" value="非表示" onclick="hide_click()"/>
6 <input type="button" value="再表示" onclick="show_click()"/>
7<% end %>

Javascript
1function hide_click() {
2  $('.input').hide();
3}
4function show_click() {
5  $('.input').show();
6}

試したこと

「非表示」ボタンを押下した際に、自動でenterキー（iphoneで言えば「確定」キー）を押下した際と同様の挙動をさせることができれば解決するのでしょうか？
よろしくお願いいたします。

補足

iPhone7, Safariで検証しています。

m.ts10806

2018/06/07 05:08

「変換未確定」が保持されないのは分かりますが「変換確定していた部分も含めて」というのは再現しませんが・・。

kotahayashi

2018/06/07 06:24

ご回答いただきありがとうございます。再度検証してみましたが、やはり「変換確定文字＋未変換文字」で「非表示」を押下すると、再表示の際に全て消えてしまっています。ご回答いただいたコードについて、検証してみます。

m.ts10806

2018/06/07 06:44

環境によるんですかね。Windows＋Chromeでは再現しませんでした。

m.ts10806

2018/06/07 06:46

そもそもshow()⇔hide()ってdisplay:block;⇔display:hidden;　を切り替えているだけなので消えてしまうことは考えにくいですが、あるとしたらブラウザの仕様かと。

kotahayashi

2018/06/07 06:50

環境について補足しました。確かにmac+chromeでも、正常に動作しました。

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

回答1件

ベストアンサー

「非表示」ボタンを押下した際に、自動でenterキー（iphoneで言えば「確定」キー）を押下した際と同様の挙動をさせることができれば

ボタン押下時だと既に未確定のテキストは無効化されているので
OnKeyUpイベントを監視するしかないかなと。

一応、下記のようにすると「未確定文字を保持してshow()時に復帰」みたいなことはできますが、
あくまで未確定であっても関係なく自動的に確定したものとして扱うだけなので「未確定を未確定状態で復帰」というのは難しそうです。

js
1var iValue = ""; 
2$(function(){
3    $("input#text-hoge").on("keyup",function(){
4        iValue = $("input#text-hoge").val();
5    });
6});
7function hide_click() {
8    $('.input').hide();
9}
10function show_click() {
11    $("input#text-hoge").val(iValue);
12    $('.input').show();
13}