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

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

新規登録して質問してみよう
ただいま回答率
85.54%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

1014閲覧

複数の入力欄の文字数を個別にカウントしてリアルタイムに表示する方法

emi_ono

総合スコア83

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2023/03/20 09:06

編集2023/03/20 11:15

前提

メニュー名、時間、料金を登録するシステムを作っています。

<tbody>内の<tr>が動的に増減します。

実現したいこと

PHP(26行目)

1 <td><input type="text" name="menu_name[]" placeholder="メニュー名" value="<?php echo $menu[$i][0];?>" class="m-form-text sample"></td>

PHP(35行目)

1<td><input type="text" name="menu_name[]" placeholder="メニュー名" value="<?php echo $menu[$i][0];?>" class="m-form-text sample"></td>

に入力できる文字数を25文字以内としたいので、入力しながら現在の文字数を確認できるようにしたいです。

何も入力していない時

メニュー文字数:0 / 25

10文字入力すると

メニュー文字数:10 / 25

このように「0」の部分が変化する様にしたいです。

最初のinputに入力した文字数はうまく表示されるのですが、次以降inputに入力しても変化しません。
「0」または最初のinputで表示された数字のまま変わらない状態です。

なぜか「Firefox」のブラウザではうまく表示されます。
アドバイスをいただけると助かります。よろしくお願いします。

該当のソースコード(HTML部分)

PHP

1<form action="check.php" method="post" enctype="multipart/form-data"> 2<!-- 料金========================================== --> 3 <div class="Form-Item"> 4 <h3 class="Form-Item-Label"><span class="must">必須</span>メニュー<span class="err"><?php echo $menu_countErr;?></span><span class="err"><?php echo $menuErr;?></span><span class="err"><?php echo $menu_timeErr;?></span><span class="err"><?php echo $menu_priceErr;?></span><span class="err"><?php echo $menu_couponErr;?></span></h3> 5 <div class="m-form-talbe"> 6 <table class="menu-table"> 7 <thead> 8 <tr class="lead"> 9 <th colspan="3"></th> 10 <th colspan="2" class="coupon">クーポン適応時</th> 11 </tr> 12 <tr class="title"> 13 <th class="menu-name">メニュー名</th> 14 <th class="menu-time">時間(分)</th> 15 <th class="menu-fee">料金(税込)</th> 16 <th class="menu-time">時間(分)</th> 17 <th class="menu-fee">料金(税込)</th> 18 </tr> 19 </thead> 20 <tbody class="addInput" id="u1"> 21 <?php 22 if(is_array($menu) == true){ 23 for ($i = 0 ; $i < count($menu); $i++){ 24 ?> 25 <tr> 26 <td><input type="text" name="menu_name[]" placeholder="メニュー名" value="<?php echo $menu[$i][0];?>" class="m-form-text sample"></td> 27 <td><input type="text" name="menu_time[]" placeholder="時間" value="<?php echo $menu[$i][1];?>" class="m-form-text"></td> 28 <td><input type="text" name="menu_price[]" placeholder="料金" value="<?php echo $menu[$i][2];?>" class="m-form-text"></td> 29 <td><input type="text" name="menu_time_coupon[]" placeholder="クーポン時間" value="<?php echo $menu[$i][3];?>" class="m-form-text"></td> 30 <td><input type="text" name="menu_price_coupon[]" placeholder="クーポン料金" value="<?php echo $menu[$i][4];?>" class="m-form-text"></td> 31 </tr> 32 <?php } 33 }else{?> 34 <tr> 35 <td><input type="text" name="menu_name[]" placeholder="メニュー名" class="m-form-text sample"></td> 36 <td><input type="text" name="menu_time[]" placeholder="時間" class="m-form-text"></td> 37 <td><input type="text" name="menu_price[]" placeholder="料金" class="m-form-text"></td> 38 <td><input type="text" name="menu_time_coupon[]" placeholder="クーポン時間" class="m-form-text"></td> 39 <td><input type="text" name="menu_price_coupon[]" placeholder="クーポン料金" class="m-form-text"></td> 40 </tr> 41 <?php }?> 42 </tbody> 43 </table> 44 <ul class="buttonset"> 45 <li><input type="button" value="追加" id="add" class='form-submit-button add'></li> 46 <li><input type="button" value="削除" id="del" class='form-submit-button del'></li> 47 </ul> 48 <div class="check-wrapp"> 49 <p class="cnt_area">メニュー文字数:<span class="now_cnt">0</span> / 25</p> 50 </div> 51 </div> 52 </div> 53<!-- 送信========================================== --> 54 <div class="submit"> 55 <p> 56 <button type='button' class='form-submit-button gray' onclick='location.href="mgmt_top.php"'>戻る</button> 57 </p> 58 <p> 59 <input type="submit" name="" value="登録" class="form-submit-button pink" /> 60 </p> 61 </div> 62</form>

該当のソースコード(jQuery部分)

JavaScript

1 2<!--jQuery本体--> 3<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 4<!--文字数をカウント--> 5<script> 6jQuery(function($){ 7 //入力時のイベント 8 $('.sample').on('input', function(){ 9 //文字数を取得 10 var cnt = $(this).val().length; 11 //現在の文字数を表示 12 $('.now_cnt').text(cnt); 13 if(cnt > 0 && 25 >= cnt){ 14 //1文字以上かつ25文字以内の場合は黒字 15 $('.cnt_area').removeClass('cnt_danger'); 16 }else{ 17 //0文字または25文字を超える場合は赤字 18 $('.cnt_area').addClass('cnt_danger'); 19 } 20 }); 21 22 //リロード時に初期文字列が入っていた時の対策 23 $('.sample').trigger('input'); 24 25}); 26</script> 27<!--メニュー追加・削除--> 28<script> 29window.addEventListener('DOMContentLoaded', ()=>{ 30add.addEventListener('click',()=>{ 31const n=u1.querySelector('tr').cloneNode(true); 32n.querySelectorAll('input').forEach(x=>x.value=""); 33u1.appendChild(n); 34}) 35 del.addEventListener('click',()=>{ 36 if(u1.querySelector('tr:nth-child(2)')){ 37 u1.querySelector('tr:last-child').remove(); 38 } 39 }) 40}); 41document.addEventListener('formdata',e=>{ 42 const f=e.formData; 43 const n=f.getAll('menu_name[]'); 44 f.delete('menu_name[]'); 45 const t=f.getAll('menu_time[]'); 46 f.delete('menu_time[]'); 47 const p=f.getAll('menu_price[]'); 48 f.delete('menu_price[]'); 49 const ct=f.getAll('menu_time_coupon[]'); 50 f.delete('menu_time_coupon[]'); 51 const cp=f.getAll('menu_price_coupon[]'); 52 f.delete('menu_price_coupon[]'); 53 n.forEach((x,y)=>{ 54 f.set(`menu[${y}][0]`,x); 55 f.set(`menu[${y}][1]`,t[y]); 56 f.set(`menu[${y}][2]`,p[y]); 57 f.set(`menu[${y}][3]`,ct[y]); 58 f.set(`menu[${y}][4]`,cp[y]); 59 }); 60}); 61</script> 62

参考にしたページ

https://kinocolog.com/jquery_input_count/

調べたこと

「JavaScript 文字カウント 複数」などで検索したのですが、解決できませんでした

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

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

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

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

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

guest

回答1

1

ベストアンサー

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 txt.addEventListener('input',()=>{ 4 txt.nextElementSibling.textContent=`メニュー文字数:${txt.value.length} / 25`; 5 }); 6}); 7</script> 8<input id="txt" maxlength="25"> 9<div></div>

調整

複数の入力欄の合計文字数を表示

javascript

1<script> 2document.addEventListener('input',e=>{ 3 const n=[...document.querySelectorAll(`[name="menu_name[]"]`)].reduce((x,y)=>x+y.value.length,0); 4 document.querySelector('.now_cnt').textContent=n; 5}); 6</script> 7<input name="menu_name[]"><br> 8<input name="menu_name[]"><br> 9<input name="menu_name[]"><br> 10<div class="check-wrapp"> 11<p class="cnt_area">メニュー文字数:<span class="now_cnt">0</span> / 25</p> 12</div>

再調整

javascript

1<script> 2document.addEventListener('input', e=>{ 3 const t=e.target; 4 if(t.matches('.txt')){ 5 t.parentNode.querySelector('.now_cnt').textContent=t.value.length; 6 } 7}); 8</script> 9<div> 10<input class="txt" maxlength="25"> 11<div>メニュー文字数:<span class="now_cnt">0</span> / 25</div> 12</div> 13<div> 14<input class="txt" maxlength="25"> 15<div>メニュー文字数:<span class="now_cnt">0</span> / 25</div> 16</div> 17<div> 18<input class="txt" maxlength="25"> 19<div>メニュー文字数:<span class="now_cnt">0</span> / 25</div> 20</div>

投稿2023/03/20 09:15

編集2023/03/22 00:21
yambejp

総合スコア114307

miyabi_pudding👍を押しています

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

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

emi_ono

2023/03/21 04:26

ありがとうございます。 <input id="txt" maxlength="25">を複数設定したい場合(設置する個数が変化するのですが)はどうすれば良いでしょうか? id="txt"の部分をclassに変更?とも思ったのですが、うまくいきません。 nextElementSiblingはclassの値を受け取る事ができないのでしょうか。 アドバイをいただけると助かります。よろしくお願いします。
yambejp

2023/03/21 05:24

複数の入力欄の合計文字数がほしいのでしょうか?
emi_ono

2023/03/21 06:45

合計ではなく、それぞれの文字数を確認したいです。 入力している時に入力中の文字数を確認したいです。
yambejp

2023/03/22 00:22

再調整したので仕様が違うようなら指摘ください
emi_ono

2023/03/22 09:26

うまくできました!!! 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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