回答編集履歴

2

saichouse

2023/03/22 00:21

投稿

yambejp
yambejp

スコア116810

test CHANGED
@@ -26,3 +26,27 @@
26
26
  <p class="cnt_area">メニュー文字数:<span class="now_cnt">0</span> / 25</p>
27
27
  </div>
28
28
  ```
29
+
30
+ # 再調整
31
+ ```javascript
32
+ <script>
33
+ document.addEventListener('input', e=>{
34
+ const t=e.target;
35
+ if(t.matches('.txt')){
36
+ t.parentNode.querySelector('.now_cnt').textContent=t.value.length;
37
+ }
38
+ });
39
+ </script>
40
+ <div>
41
+ <input class="txt" maxlength="25">
42
+ <div>メニュー文字数:<span class="now_cnt">0</span> / 25</div>
43
+ </div>
44
+ <div>
45
+ <input class="txt" maxlength="25">
46
+ <div>メニュー文字数:<span class="now_cnt">0</span> / 25</div>
47
+ </div>
48
+ <div>
49
+ <input class="txt" maxlength="25">
50
+ <div>メニュー文字数:<span class="now_cnt">0</span> / 25</div>
51
+ </div>
52
+ ```

1

調整

2023/03/21 05:33

投稿

yambejp
yambejp

スコア116810

test CHANGED
@@ -9,3 +9,20 @@
9
9
  <input id="txt" maxlength="25">
10
10
  <div></div>
11
11
  ```
12
+
13
+ # 調整
14
+ 複数の入力欄の合計文字数を表示
15
+ ```javascript
16
+ <script>
17
+ document.addEventListener('input',e=>{
18
+ const n=[...document.querySelectorAll(`[name="menu_name[]"]`)].reduce((x,y)=>x+y.value.length,0);
19
+ document.querySelector('.now_cnt').textContent=n;
20
+ });
21
+ </script>
22
+ <input name="menu_name[]"><br>
23
+ <input name="menu_name[]"><br>
24
+ <input name="menu_name[]"><br>
25
+ <div class="check-wrapp">
26
+ <p class="cnt_area">メニュー文字数:<span class="now_cnt">0</span> / 25</p>
27
+ </div>
28
+ ```