개요

사이트 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 측에서 처리해도 좋았습니다만, 이번은 가능한 한 소스를 유용하는 방향으로 대응했습니다.

참고문헌

양식 - MDN - Mozilla

[IE 대책도] UTF-8 폼에서 다른 문자 코드로 POST할 때의 깨짐 해소법