jQuery 全角英数文字を英数半角に自動変換してフォームの使いやすさを向上させる方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。前回から引き続き、フォーム関連の連続記事です。今回のTipsは【全角英数文字を英数半角に自動変換してフォームの使いやすさを向上させる方法】です。今回のTipsはRewish@hatenaさんの記事を参照させていただきました。

フォームの使いやすさやデザイン性を向上させる33の方法

これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。

発展編

19. 全角英数文字を英数半角に自動変換

今回の例はメールアドレスや電話番号の入力フォームの入力後に全角英数文字を半角英数文字に自動変換させます。半角か全角かを迷わせる事が無いので多少なりユーザーに優しいフォーム作りに役立つのではないでしょうか。

実装前 実装後(123等入力してみてください)

HTML


<input type="text" class="fm">

JS

$(function() {
$(‘.fm’).change(function(){
var txt = $(this).val();
var han = txt.replace(/[A-Za-z0-9]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});
$(this).val(han);
});
});

以上になります。デモでは今回のtipsを適応した例が確認できますので、もしよろしければ合わせてご確認ください。