前提・実現したいこと
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キー押すのと同じ動作をさせることができれば、解決するのかとも考えましたが…。
不明点がございましたら、追記します。よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。