残り入力可能な文字数をカウントするコードを作成したのですが、あと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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript JavascriptでDom XSSの脆弱性対策を行いたい 2 2023/09/24 21:20
- JavaScript 変数名をどのようにつけるのが良いかアドバイスお願い致します 4 2024/02/28 19:44
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript JavascriptのHTMLクラス表示について 1 2024/03/10 19:10
- JavaScript JavascriptでXSSの脆弱性への対策を行いたい 2 2023/08/31 22:28
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
このQ&Aを見た人はこんなQ&Aも見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
コードを書いて下さい( ; ; )写真有り
HTML・CSS
-
mallocについて
C言語・C++・C#
-
-
4
以下のURL入れますか?皆さんは↓
AJAX
-
5
コードを直していただきたいです。 以下のコードはネットで拾ったものをほんの少しいじった物なのですが、
Visual Basic(VBA)
-
6
HTMLで作った時報アプリが動きません
JavaScript
-
7
変数名をどのようにつけるのが良いかアドバイスお願い致します
JavaScript
-
8
なんでブラウザでPHPを動かすためだけにOSにPython2(Python3)を入れて、C(GCC)
PHP
-
9
Webプログラムってネイティブアプリプログラムに比べて遥かに簡単すぎる気がするのですが気の所為ですか
その他(プログラミング・Web制作)
-
10
システムエンジニアの適正について
C言語・C++・C#
-
11
どちのほうがすきですか?
C言語・C++・C#
-
12
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
13
VBA初心者 Ctrl+での操作、ボタンに登録での操作
Visual Basic(VBA)
-
14
C言語 配列と関数の練習問題
C言語・C++・C#
-
15
三項でたとえば交換って
Ruby
-
16
二次元配列を使って順位をだすときに、同点の場合の順位をだす方法を教えて下さい。
JavaScript
-
17
Pythonって何を意識した言語なんですか?コマンドライン?
その他(プログラミング・Web制作)
-
18
VBEを開くのにコマンド名が「Visual Basic」な理由はなぜ?
Visual Basic(VBA)
-
19
大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。 それからの手順で悩んでる
HTML・CSS
-
20
ぱいソン
Ruby
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavascriptでDom XSSの脆弱性対...
-
Q&A掲示板の入力フォームに文字...
-
フォーム要素を下から上にフェ...
-
jqueryアコーディオンの上部の...
-
JavaScriptのdiv.style属性の変...
-
時間帯によってclass名を変更し...
-
生成AI画像について
-
メルカリのメルカードで買い物...
-
画像をループさせるうまい方法...
-
リストボックスの選択解除
-
VBAでループ内で使う変数名を可...
-
Pythonでgif画像が上手く作れない
-
エクセルVBAで、MsgBox やInput...
-
switch の範囲指定
-
「ご処理進めて頂きますようお...
-
Excel VBAでマウスの左クリック...
-
VBA エンターキーでイベントに...
-
エクセルで、日付を入力すると...
-
お家デートをしててハグを長い...
-
【Excel】特定の文字を含むセル...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavascriptのHTMLクラス表示に...
-
【JavaScript】検索がヒットし...
-
JavascriptでDom XSSの脆弱性対...
-
JavascriptでXSSの脆弱性への対...
-
CSSでreadonlyの機能はあり...
-
formのsubmitを押すとモーダル...
-
javascriptのエラーで質問です。
-
特定の条件のHTML要素を一括で...
-
javascriptで複数の表示・非表...
-
確認ダイアログを次からは表示...
-
2回目以降のページロード時には...
-
jqueryを使ったスムーススクロ...
-
時間帯によって背景を切り替え...
-
jqueryアコーディオンの上部の...
-
クリックすると、色が変わるよ...
-
jQueryでのドラッグアンドドロ...
-
ブラウザの表示領域から高さを...
-
vertical sliderをautoplayしたい
-
動画の上に広告をオーバーレイ...
-
GoogleストリートビューAPIでイ...
おすすめ情報