概要

サイト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側で処理しても良かったのですが、今回はなるべくソースを流用する方向で対応しました。

参考文献

form - MDN - Mozilla

[IE対策も] UTF-8フォームから別の文字コードへPOSTする際の文字化け解消法