JavaScriptでの残り文字数カウント

JavaScript初心者です。
textareaの残り文字数をカウントダウンしようとしています。
onkeyupでJavaScriptのメソッドをcallして残り文字数を更新しているのですが、コピー＆ペーストを行うと更新されないケースがあります。
・スマホでロングタップして貼り付け
・PCでマウス操作による貼り付け
の場合に更新されません。
PCで[ctrl]+vで貼り付けたときは更新されるので、上記２ケースではkeyupイベントが発生していないためと考えています。
いくつかネットに紹介されている実装例を見てみましたが、同じ問題があるように思います。
回避方法がありましたらご教示ください。

【補足】
回答ありがとうございます。
情報が抜けていて申し訳ありません。jQueryでの解決方法をお願い致します。
ご提示のありましたchangeイベントは、textareaからフォーカスが外れないと発火しないので使用目的には合いませんでした。
oninputで検知すると確かにマウスでの貼り付けでもうまく動作しますが、IE8では対応されていないのでしょうか。
APIを見てもinputイベントというのは見当たりませんので気になります。

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

回答4件

ベストアンサー

IE8を無視できるのであれば、oninputイベントを使ってみるのが適当かなと思いました（参考）。

【追記】

MDNによれば、oninputはIEだと9以上で対応しています。jQueryから使う場合は、.on('input', function(){/*処理*/})のようにして使えます。

投稿2017/03/09 01:16

編集2017/03/09 22:47

maisumakun

総合スコア145183

turkey1212

2017/03/10 17:33

ご提示の方法で実現することができました。ありがとうございました。

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

以前同じような質問があったときに書いたコードですが参考になると思います。

javascript

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<form>
9    <label>
10        <textarea type="text" id="text1"></textarea>
11    </label>
12</form>
13<script>
14    const max_length = 5;//最大の文字数。
15    let text1 = document.getElementById("text1");
16    text1.addEventListener("input", function () {
17        if (text1.value.length > max_length) {
18            text1.value = text1.value.slice(0, max_length);
19        }
20    }, false);
21</script>
22</body>
23</html>

jQuery

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<form>
9    <label>
10        <textarea type="text" id="text1"></textarea>
11    </label>
12</form>
13<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
14<script>
15    const max_length = 5;//最大の文字数。
16    $('#text1').on('input', function () {
17        if ($(this).val().length > max_length) {
18            $(this).val($(this).val().slice(0, max_length));
19        }
20    });
21</script>
22</body>
23</html>