フォームで送信先の文字コードが違うとき送信する値が文字化けしないようにする
楽天の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で動きませんでした。
CSS本執筆しました！！！
CSS本出します！1/29発売予定
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs