質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

369閲覧

スマホ・チャット型入力フォーム 変換確定前に次に進むと、修正時にinputタグから入力内容が消えてしまう

kotahayashi

総合スコア15

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/06/06 09:53

編集2018/06/06 09:54

前提・実現したいこと

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

iphoneで挙動を確認していますが、平仮名や句点(。)等、未変換のまま(背景が青色のまま、「確定」を押下せずに)「次へ」を押すと、
入力内容を修正したいときに入力した内容がinputタグから消えてしまっています。

平仮名や句点の入力時にわざわざ「確定」をタップしないユーザーも多いと考え、この点を修正したいです。

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

このようなフォームです(参考画像)。「送信内容を修正」を押すと、この内容の入力inputタグが出てきます。

このような未変換の状態で「入力」を押下すると、「送信内容修正」時にinputタグの中身が空になってしまいます。

該当のソースコード

HTML

1// 入力部分。 2 <div class="form-group input2" style="display: none;"> 3 <% f.label :name %> 4 <%= f.text_field :name, {id: "text-name", type: "text", class:"text-form", required: true} %> 5 </div> 6 7//出力部分。 8 <div class="balloon-right output2" style="display: none;"> 9 <div>お名前: 10 <span id="output-text-name"></span> 11 </div> 12 </div> 13 <input style="display: none;" class="name-modify-button" type="button" value="送信内容を修正" onclick="modify_name_click()"/> 14 15//「次へ」ボタン部分 16 <input class="next-button" type="button" value="次へ" onclick="next_button_click()"/> 17 18 19

JavaScript

1 2function next_button_click() { 3 var textName = $('#text-name').val(); 4 $('.output2').show; //出力部分を表示 5 $('.name-modify-button').show(); //修正ボタンを表示 6 $('#output-text-name').text(textName); //出力部分に入力内容を表示。未変換でもこれは機能する。 7 $('.input2').hide(); //入力済の入力部分を非表示 8 $('.input3').show(); //次に入力する部分を表示 9} 10 11function modify_name_click() { 12 $('.input2').show(); //修正したい入力部分を再表示 13 $('.output2').hide(); //修正したい出力部分を非表示 14 (略) 15} 16//未変換時、未変換部分だけでなく全ての入力内容が、input2のinputタグ内から消えてしまっている。 17 18

試したこと

「次へ」を押下した際、enterキー押すのと同じ動作をさせることができれば、解決するのかとも考えましたが…。
不明点がございましたら、追記します。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

より簡潔な質問に変更し解決しました。
https://teratail.com/questions/129850

投稿2018/06/08 01:50

kotahayashi

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問