つらい・・・

Q&A掲示板の入力フォームに文字数制限を設けて入力可能な文字数を表示したい

締切済

質問者：初心者サイト作成
質問日時：2024/04/08 02:46
回答数：1件

残り入力可能な文字数をカウントするコードを作成したのですが、あと1文字入力できるのにそこでボタン送信ができないように制限がかかってしまいます。
原因が分からない為コードを調べなおしてみました。引き算に問題が生じているのではないかと考えているのですが、どこを修正すべきか分かりませんアドバイスお願い致します。

※該当コード
<php>
class MAX_LENGTH
{
public const NAME = 50;
public const TITLE = 50;
public const QUESTION = 500;
}
</php>

<html>
<div id="input_area">
<form name="input_form">
　　　　　　　　　<div class="body-partial-parts">
<h2>質問文(question)<span class="required">※必須</span></h2>
<div class="parts">
<textarea class="input" name="question" id="question" data-length="<?php echo MAX_LENGTH::QUESTION; ?>" data-minlength="<?php echo MIN_LENGTH::QUESTION; ?>" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"></textarea>
<div></div>
</div>
</div>

<div class="title-partial-parts"> 
<h2>質問タイトル(title)<span class="required">※必須</span></h2>
<div class="parts">
<input class="input" type="text" name="title" id="title" data-length="<?php echo MAX_LENGTH::TITLE; ?>" data-minlength="<?php echo MIN_LENGTH::TITLE; ?>" placeholder="<?php echo MIN_LENGTH::TITLE; ?>文字以上で入力してください">
<div></div>
</div>
</div>

<div class="usericon-partial">
<h2>画像アイコン(image icon)<span class="required">※任意</span></h2>
<div class="usericon-thumbnail-button">
<label>
<div class="usericon-uploads">
<img src="<?php echo $noimage_url; ?>" class="changeImg" style="height: 100px;">
</div>
<input type="file" class="attach" name="attach[]" data-maxsize="5" accept=".png, .jpg, .jpeg" style="display: none;">
</label>
<div class="viewer"></div>
<button type="button" class="attachclear">clear</button>
</div>
</div>

<div class="namae-partial-parts"> 
<h2>名前(name)<span class="required">※任意</span></h2>
<div class="parts">
<input class="input" type="text" name="namae" id="name" data-length="<?php echo MAX_LENGTH::NAME; ?>" data-minlength="<?php echo MIN_LENGTH::NAME; ?>" placeholder="未入力の場合は、匿名で表示されます">
<div></div>
</div>
</div>

<div class="post-button">
<button type="button" id="submit_button" name="mode" value="confirm">確認画面へ進む</button>
</div>

</form>
</div>
</html>

<script>
document.addEventListener('input', e => {
if (!['name', 'title', 'question'].includes(e.target.id)) return;
const
t = e.target,
m = t.nextElementSibling,
n = t.value.length - (t.dataset.length | 0),
c = document.createElement('strong');
//絶対値が欲しい時
c.append(Math.abs(n));
//classを設定
m.className = 'msg_partial';
m.style.color = n > 0 ? 'red' : 'black';
m.replaceChildren(n > 0 ? '' : '残り', c,
`文字${n > 0 ? '超過してい' : '入力でき'}ます。`);
</script>

※調べたもの
e,もし名前、タイトル、質問の id が取得できなければ終了する
t,イベントターゲット　イベントが発生した要素
m,イベントが発生した次の要素を取得する
n,名前、タイトル、質問のテキストボックスの文字列の長さを取得する－要素に設定されたカスタム属性（date-）の値（文字列の長さ）を取得する
c,要素を生成（strong）

c.append(math.abs(n));親要素に子要素を追加する　絶対値を返す。
m.replaceChildren();要素の子要素を全部削除して引数で渡したものに置き換える

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： Ogre7077
回答日時：2024/04/08 10:39

ご提示の範囲内に「ボタン送信ができないように制限」しているスクリプトが見当たりません。

まずは制限をしている箇所を探すことから始めましょう。

案1. 押せなくする対象のボタン名でスクリプトを探す
案2. 送信ができない対象のフォーム名でスクリプトを探す
案3. ステップ実行しながら、ボタン無効化のタイミングを見極める

参考) ステップ実行する
https://developer.mozilla.org/ja/docs/Learn/Comm …
https://developer.chrome.com/docs/devtools/javas …
https://learn.microsoft.com/ja-jp/microsoft-edge …

制限の箇所が見つかれば、そこの判断式を整理整頓して、
誤解の余地が無いように見やすく解りやすい書き方に改めましょう。
大抵のミスはこの過程にて解消できます。

例)
入力した文字数 = テキスト入力要素.xxx;
最大の文字数 = テキスト入力要素.yyy;
超過した文字数 = 入力した文字数 - 最大の文字数;
送信できない判定 = 超過した文字数 > 0;
if (送信できない判定) {
_ ボタン送信を無効化する(ボタン要素);
} else {
_ ボタン送信できる(ボタン要素);
}
参考)
https://www.google.com/search?q=js+%E5%A4%89%E6% …