フォームで送信先の文字コードが違うとき送信する値が文字化けしないようにする

楽天のWebサイトに検索ボックスを設置するときに、送信先がEUC-JPなので文字化けしてしまい、正しく検索することができませんでした。送信元と送信先で文字コードが異なるとき、どうすれば正しく処理されるのか紹介します。

accept-charset 属性


<form method="get" action="" accept-charset="euc-jp">
  ...
</form>

accept-charset に送信先の文字コードを指定すれば、IE以外のブラウザでは正しく処理されます。

IEの場合


<form class="form-fix" method="get" action="" accept-charset="euc-jp">
  ...
</form>

// IEとEdge判定
var IEorEdge = /*@cc_on!@*/false || ('-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style);

// IEだと戻ったときに変更した文字コードのままになる
if (IEorEdge && document.charset !== 'utf-8') {
  document.charset = 'utf-8';
  location.reload();
}

// 送信したときに文字コードを送信先の文字コードに変更
$('.form-fix').on('submit', function() {
  if (IEorEdge) {
    document.charset = 'euc-jp';
  }
});

document.charset で文字コードを変更してから送信します。ちなみに document.charset は非推奨で代わりに document.characterSet を使用するようにMDNに記載されていましたが、IEで動きませんでした。