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

前提・実現したいこと

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

下記のように、特に平仮名や句点（。）等、未変換の状態（未確定文字）でhideメソッドを実行しても、
入力内容を保持したいと考えています。

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

画像のように、一部の文字の背景が青色（未変換の状態）で「非表示」を押下してhideメソッドで非表示とすると、
入力内容が消えてしまっているせいか'required: true'のバリデーションが働き、フォーム送信ボタンで送信できない。

該当のソースコード

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

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

試したこと

https://teratail.com/questions/129963
こちらの質問でのご回答を参考に、試行錯誤しましたが、うまくいきませんでした。

補足

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

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

回答1件

ベストアンサー

試行錯誤の内情がわかりませんが、前の質問も含めて考えると、未確定文字の保持はできているということですかね？
であればjQuery側で非表示になっているコントロールを取得して、valueにその保持した文字列を入れてやってから送信すればrequired突破できたりしませんか？
・フォーム送信ボタン押下
・jQueryでイベントを取得
・入力欄の状態（表示/非表示）を取得
・非表示であれば保持している文字列を入力欄のvalueに詰めて
・form.submit()
てきな

投稿2018/06/26 08:22