残り入力可能な文字数をカウントするコードを作成したのですが、あと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"><!-- 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"> <!-- 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"> <!-- 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>
<!-- type、name、id、valueの順番 -->
</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();要素の子要素を全部削除して引数で渡したものに置き換える
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
ご提示の範囲内に「ボタン送信ができないように制限」しているスクリプトが見当たりません。
まずは制限をしている箇所を探すことから始めましょう。
案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% …
アドバイスありがとうございます。以下でもなく以上というコードになっていたようです。
/* 最大チェック */
if (text.value.length > text.dataset.length) {
return false;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
これ何て呼びますか Part2
あなたのお住いの地域で、これ、何て呼びますか?
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
Javascriptエラーの原因が分からない
JavaScript
-
コードを書いて下さい( ; ; )写真有り
HTML・CSS
-
時間短縮のために、テキストファイルの入出力をメモリを使って出来ないですか?
Visual Basic(VBA)
-
-
4
Pythonのコードエラーについてです。
その他(プログラミング・Web制作)
-
5
HTMLタグに複数のクラスを設定する方法がわからない
JavaScript
-
6
どちのほうがすきですか?
C言語・C++・C#
-
7
変数名をどのようにつけるのが良いかアドバイスお願い致します
JavaScript
-
8
mallocについて
C言語・C++・C#
-
9
プログラムについて。
JavaScript
-
10
VBA初心者 Ctrl+での操作、ボタンに登録での操作
Visual Basic(VBA)
-
11
ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい
JavaScript
-
12
応用情報技術者試験の令和元年秋、午後のプログラムの問題がわからないです。
C言語・C++・C#
-
13
システムエンジニアの適正について
C言語・C++・C#
-
14
VBAで大量のファイルをシート名ごとに転記やらいろいろしたい!
Visual Basic(VBA)
-
15
C言語 配列と関数の練習問題
C言語・C++・C#
-
16
AIの登場でプログラマーたちが解雇されていますが
その他(プログラミング・Web制作)
-
17
Vba SelStart、SelLen教えてください教えてください
Visual Basic(VBA)
-
18
先日ウェブデザイン技能検定三級を受けたのですが、公式の解答では答えが②となっているのですがその理由が
HTML・CSS
-
19
VBA レジストリの値の読み方について教えてください
Visual Basic(VBA)
-
20
VBAなくなるの?
Visual Basic(VBA)
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
SITEINFOの書き方について
-
エクセル VBA ボタンが押せな...
-
formのsubmitを押すとモーダル...
-
確認ダイアログを次からは表示...
-
メルカリのメルカードで買い物...
-
エクセルで、日付を入力すると...
-
Excelシート上のマクロを登録し...
-
uwscの画像認識に失敗します。
-
CloseとDisposeの違い
-
excel スクロールしても常にボ...
-
「ご処理進めて頂きますようお...
-
VBAでループ内で使う変数名を可...
-
Access vbaで重複レコードの削...
-
UPS警告音を止めたい
-
「PC Helpsoft Driver Updated...
-
インタラクティブの反対語は?
-
エクセルVBAで、MsgBox やInput...
-
Accessでサブフォームの合計を...
-
Excelで、ボタンにコメントをつ...
-
findは動くがfindnextがマクロ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
確認ダイアログを次からは表示...
-
CSSでreadonlyの機能はあり...
-
formのsubmitを押すとモーダル...
-
折りたたみを全て開いて別ペー...
-
動画の上に広告をオーバーレイ...
-
javascriptで複数の表示・非表...
-
フォームで「パスワード(確認...
-
2回目以降のページロード時には...
-
時間帯によってclass名を変更し...
-
特定の条件のHTML要素を一括で...
-
JavascriptのHTMLクラス表示に...
-
javascriptのエラーで質問です。
-
macかwinか判別しスタイルシー...
-
JavascriptでDom XSSの脆弱性対...
-
jQuery 画面サイズにスライド画...
-
iframe内のスクリプトを親から3...
-
GoogleMapのGeocoderがlocalhos...
-
【html.css.java】営業日カレン...
-
ポップアップのリンク先と閉じ...
-
雪が降るようなスクリプト
おすすめ情報