テキストエリアの字数制限　マウスコピーもカウントしたい。

実現したいこと

入力フォームに字数制限するコードを書いているのですが、提示したコードにあるmainjsのkeyupだと、マウスによるコピーペーストされた文字が適応されないらしいのですが、これをマウスによるコピーペーストでも文字数をカウントするようにしたいです。

changeというのが良いらしいのですが、mainjsコードに以下keyupをchangeに変更なんて効果なし。
textarea.addEventListener('change', (e) => {

記事調べてもあまり出てこなくて、先に進めずにいます。
回答よろしくお願い致します。

jQueryやmaxlength は考えてないです。

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5<head>
6    <meta content="text/html; charset=utf-8" />
7    
8    <title></title>
9    <link rel="stylesheet" href="companyhp6form1.css">
10   
11    
12    <style type="text/css">
13
14  
15      /* 入力フォームの位置 */
16
17      .auto-style1 {
18
19text-align: center;
20
21}
22
23
24
25</style>
26
27
28</head>
29
30<body>
31
32
33  <form action="companyhp6form1.php" method="post">
34
35
36
37   <div class="auto-style1">
38            <p class="tel-titile">
39                お問い合わせ内容入力（150文字）：
40            </p>
41               <textarea name="question" class="question" id="question" cols="40" rows="10" placeholder="150文字以内で入力して下さい。"></textarea>
42                   
43                </div>
44            
45
46        <div class="auto-style1">
47
48            <button type="submit" id="submit" name="submit" class="auto-style4">
49               送信</button>
50        </div>
51       
52    </form>
53
54   
55
56
57</body>
58 <script src="main.js"></script>
59
60
61</html>

css
1#question {
2  
3  border: 2px solid #4e4e4e;  /* 枠線 */
4  padding: 0.5em;          /* 内側の余白量 */
5  background-color: snow;  /* 背景色 */
6  width: 31.6em;             /* 横幅 */
7  height: 170px;           /* 高さ */
8  font-size: 1em;          /* テキスト内の表示文字サイズ */
9  line-height: 1.2;         /* 行の高さ */
10margin-top: 25px; /* フォームの縦位置調節のため */
11}
12/* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/
13.tel-titile{
14  line-height: 0px;/* 文字の行間 */
15  font-size: 22px;/* 文字の大さ */
16  font-weight: 900;/* 文字の太さ */
17  text-align: center;/* 文字を中央に配置 */
18  color: #4e4e4e;
19}
20
21
22/* 送信ボタンの大きさ、スタイル */
23.auto-style4 {
24
25  margin-top: 40px;
26  
27  height: 80px; 
28  width: 370px;/
29  padding: 0;
30  font-size: 35px;
31  
32  margin-bottom: 40px;
33  
34  }

mainjs
1 //文字制限のコード　入力フォームのテキストエリア　タグは＜textarea＞
2
3
4 let textarea = document.getElementById('question');
5 textarea.addEventListener('keyup', (e) => { //keyupはマウスのコピーペーストがカウントされない（欠点）
6  textarea = document.getElementById('question');
7  const submit = document.getElementById('submit');
8
9  if (textarea.value.length > 150) {
10    alert("150文字以内で記述してください。");
11    submit.disabled = true;
12  }else {
13    submit.disabled = false;
14  };
15});

mainjs
1let textarea = document.getElementById('question');
2textarea.addEventListener('input', inputChange(e) => {
3  textarea = document.getElementById('question');
4  const submit = document.getElementById('submit');
5
6  if (textarea.value.length > 150) {
7    alert("150文字以内で記述してください。");
8    submit.disabled = true;
9  }else {
10    submit.disabled = false;
11  };
12});

行動規範の内容に同意します

回答1件

ベストアンサー

厳密にイベントを特定したいならpasteイベント、入力全般ならinputイベントで採れると思います。

【HTMLElement: input イベント - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/input_event

【Element: paste イベント - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/paste_event

投稿2021/08/14 09:14

kei344

総合スコア69407

gujhufiugho

2021/08/14 12:44

回答ありがとうございます。 textarea.addEventListener('keyup', (e) => {のコードところを以下のように変更したのですが、エラーメッセージ何もでなくなりました。入力全般をinputイベントでやりたいのですが、多分私の書き方間違っていると思います。 textarea.addEventListener('input', inputChange(e) => {