小粋空間  -  a cheap joke and a play on words site

入力フォームの全角・半角を勝手に変換してくれるJavaScript

入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。

１．発端

「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。

というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。

それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。

２．半角を全角に変換する仕組み

半角文字の文字コードから65248番目の文字コードが全角文字になるようです。

よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。

"ABC".replace( /[A-Z]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) + 65248);
});

３．全角を半角に変換する仕組み

全角から半角に変換するには、先程と逆に65248番手前の文字コードの文字に変換します。

"ＡＢＣ".replace( /[Ａ-Ｚ]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 65248);
});

以下、実用的かどうか分かりませんが動作可能なサンプルを紹介します。

動作はWindows XP/Vista + Firefox/Chrome/IE9で確認しています。

４．フォーカスがはずれると半角⇔全角を変換するサンプル

２項・３項の仕組みを使って、テキストフィールドに文字を入力し、フォーカスがはずれると変換するスクリプトを作りました。

スクリプトでチェックしている以外の半角文字は全角になりません。また最初から全角の文字はそのままです。

jQueryの呼び出しは省略しているので適宜追加してください。

フォーカスがはずれると半角→全角に変換するサンプル

<script>
$(function(){
    $("#foo").change(function(){
        var str = $(this).val();
        str = str.replace( /[A-Za-z0-9-!"#$%&'()=<>,.?_\[\]{}@^~\\]/g, function(s) {
            return String.fromCharCode(s.charCodeAt(0) + 65248);
        });
        $(this).val(str);
    }).change();
});
</script>
<input type="text" id="foo" value="" />

こちらは全角から半角に変換するサンプルです。

フォーカスがはずれると全角→半角に変換するサンプル

<script>
$(function(){
    $("#foo").change(function(){
        var str = $(this).val();
        str = str.replace( /[Ａ-Ｚａ-ｚ０-９－！”＃＄％＆’（）＝＜＞，．？＿［］｛｝＠＾～￥]/g, function(s) {
            return String.fromCharCode(s.charCodeAt(0) - 65248);
        });
        $(this).val(str);
    }).change();
});
</script>
<input type="text" id="foo" value="" />

５．リアルタイムに半角⇔全角を変換するサンプル

２項・３項の仕組みを使って、テキストフィールドに文字を入力し、リアルタイムに変換するスクリプトを作りました。

リアルタイムに半角→全角に変換するサンプル

<script>
var han2zen = function(e) {
    var v, old = e.value;
    return function(){
        if( old != ( v = e.value ) ){
            old = v;
            var str = $(this).val();
            str = str.replace( /[A-Za-z0-9-!"#$%&'()=<>,.?_\[\]{}@^~\\]/g, function(s) {
                return String.fromCharCode(s.charCodeAt(0) + 65248);
            });
            $(this).val(str);
        }
    }
};
$(function(){
    $("#foo").each(function(){
        $(this).bind('keyup', han2zen(this));
    });
});
</script>
<input type="text" id="foo" value="" />

こちらは全角から半角に変換するサンプルです。

追記：各ブラウザで確認したところ、chromeでは候補文字の変換ができないようなのでこのサンプルはダメそうです。失礼致しました。

リアルタイムに全角→半角に変換するサンプル

<script>
var zen2han = function(e) {
    var v, old = e.value;
    return function(){
        if( old != ( v = e.value ) ){
            old = v;
            var str = $(this).val();
            str = str.replace( /[Ａ-Ｚａ-ｚ０-９－！”＃＄％＆’（）＝＜＞，．？＿［］｛｝＠＾～￥]/g, function(s) {
                return String.fromCharCode(s.charCodeAt(0) - 65248);
            });
            $(this).val(str);
        }
    }
};
$(function(){
    $("#foo").each(function(){
        $(this).bind('keyup', zen2han(this));
    });
});
</script>
<input type="text" id="foo" value="" />

もう少し手を加えて、たとえば長音「ー」を「-」にできればなおいいかもしれません。

６．送信時に半角⇔全角を変換するサンプル

ユーザに全角⇔半角の変換を見せずに、フォーム送信時に変換します。この方法が本来かと思います。

以下は半角→全角への変換コードです（動作サンプルは省略）。

<script>
$(function(){
    $("#test").submit(function(){
        var str = $("#foo").val();
        str = str.replace( /[A-Za-z0-9-!"#$%&'()=<>,.?_\[\]{}@^~\\]/g, function(s) {
            return String.fromCharCode(s.charCodeAt(0) + 65248);
        });
        $("#foo").val(str);
    });
});
</script>
<form method="post" id="test" action="foo.cgi">
<input type="text" name="foo" id="foo" value="" />
<input type="submit" value="送信" />
</form>

なおこの方法では、送信ボタンを押下した瞬間にテキストフィールドの文字が全角になるのが見えてしまうので、「type="hidden"」のinput要素に設定して送信する方がいいでしょう。

以下は「type="hidden"」のinput要素に設定するように修正したサンプルです。

<script>
$(function(){
    $("#test").submit(function(){
        var str = $("#foo").val();
        str = str.replace( /[A-Za-z0-9-!"#$%&'()=<>,.?_\[\]{}@^~\\]/g, function(s) {
            return String.fromCharCode(s.charCodeAt(0) + 65248);
        });
        $("#bar").val(str);
    });
});
</script>
<form method="post" id="test" action="foo.cgi">
<input type="hidden" name="bar" id="bar" value="" />
<input type="text" name="foo" id="foo" value="" />
<input type="submit" value="送信" />
</form>

フォーム送信で実行されるスクリプトも掲載しておきます。

#!/usr/bin/perl
 
use strict;
use CGI;
 
my $q = new CGI();
 
print $q->header(-charset=>"utf-8");
print "foo:".$q->param('foo') . "<br />";
print "bar:".$q->param('bar');
print $q->end_html;