エントリーシートで文字数確認用のボタンをいちいち押させるな #JavaScript

目的

文字数制限があるのに、文字数をリアルタイム表示してくれないエントリーシートのなんと多きことよ。
textarea, input[type='text']の近くに文字数を表示させたろ！！（むしろ最初から表示してくれよ）
アドオンかブックマークレットのどちらか・・・。今回はブックマークレットにしよう。

ブックマークレット

javascript:(function(b){if(window.jQuery&&2<=window.jQuery().jquery[0])b(jQuery);else{var a=document.createElement("script");a.src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){b(jQuery.noConflict(!0))};var c=document.body;c.appendChild(a);c.removeChild(a)}})(function(b){["textarea","input[type='text']"].forEach(function(a){b(a).each(function(a,d){var c=document.createElement("span");d.insertAdjacentElement("beforebegin",c);d.insertAdjacentElement("beforebegin",document.createElement("br"));var e=function(){c.textContent=d.textLength};e();b(d).bind("input propertychange",e)})})});

元コード

((func) => {
  if(window.jQuery && (window.jQuery().jquery[0] >= 2)) {
    func(jQuery);
  } else {
    let scr = document.createElement("script");
    scr.src = "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js";
    scr.onload = () => {
      func(jQuery.noConflict(true));
    };
    let bd = document.body;
    bd.appendChild(scr);
    bd.removeChild(scr);
  }
})(($) => {
  ["textarea", "input[type='text']"].forEach((selector) => {
    $(selector).each((i, t) => {
      let span = document.createElement("span");
      t.insertAdjacentElement("beforebegin", span);
      t.insertAdjacentElement("beforebegin", document.createElement("br"));
      let f = () => { span.textContent = t.textLength; };
      f();
      $(t).bind("input propertychange", f);
    });
  })
});

概説

前半部分：引数として渡される関数を実行するjQueryの設定
- jQueryが存在する && ページのjQueryのバージョンが2以上？
  - true → 存在するjQueryで関数を実行
  - false → v3.2.1を読み込み関数を実行 && 読み込んだjQueryを削除
後半部分：リアルタイム文字数表示の実装
- "textarea", "input[type='text']"に該当する要素に対して
  - 要素の前に<span>（と<br>）を生成
  - 入力箇所の変化をバインドして、<span>の文字を置換

エントリーシートで文字数確認用のボタンをいちいち押させるな

目的

ブックマークレット

元コード

概説

参考