概要
サイトA：検索フォームが設置されている[文字コードUTF-8]
サイトB：サイトAからのリクエストを受けて結果を表示[文字コードEUC-JP]
例えば古いサイトで、ブログだけWordPressで作られてたりして、
共通ヘッダーから商品検索ができるようにしたい場合。
まぁ今時UTF-8以外で作られてるサイトって...とは思いますが、それは置いといて。
対策しないとどうなるか
文字化けします↓
[対策1] accept-charset
<input type="search" name="search_form" placeholder="キーワードを入力" autocapitalize="off" value="" />
<input type="button" name="search_button" value="検索" />
<form name="search" id="search" method="get" action="/list.html" accept-charset="EUC-JP">
<input type="hidden" name="search_key" id="search_keyword" value="">
</form>
accept-charset属性に送信先の文字コードを指定するだけで上手くいっちゃったりする。
しかし、IE非対応。あるある過ぎて、もはや怒りも湧いてこない。
[対策2] ecl.js
<form name="search" id="search" method="get" action="/list.html" onsubmit="submitFunc(); return false;">
<input type="text" name="search_form" placeholder="キーワードを入力" autocapitalize="off" value="" />
<input type="submit" name="search_button" value="検索" />
<input type="hidden" name="search_key" id="search_keyword" value="">
</form>
<script src="./js/ecl.js"></script>
<script>
function submitFunc() {
var utf8Pram = document.search_form.value; //入力値を取得
var eucPram = EscapeEUCJP(utf8Pram); //エンコード処理
document.forms.search.search_key.value = eucPram; //valueに設定
document.forms.search.submit(); //送信処理
}
</script>
詰まったところ
onsubmit="submitFunc(); return false;"
対策2を試しているとき、入力してエンターキーを押すと、デフォルトでフォーム送信処理が走るのですが、その際submitFunc()の処理が通らない事象に遭遇しました。
エンターキー押下時のデフォルトの動きを抑制しつつ、処理を挟むやり方が最初分からなかったです。
インラインで実行せずに全部JavaScript側で処理しても良かったのですが、今回はなるべくソースを流用する方向で対応しました。