これは特殊な例だと思いますが、以前、Webサイトの制作で、トップページのみナビゲーションメニューの各テキストを大きく表示させてレイアウトするデザインをしました。
その際に、どうしてもテキストを全角文字にして日本語も英数字も等幅にしたかったのですが、各ページのナビゲーションメニューは半角英数字と日本語で表示したいということがありました。
概要
半角英数字の場合は文字コードに65248を加算することで全角になり、全角英数字の場合は65248を差し引くことで半角になります。
replace関数を用い、当該箇所をこれらに置き換えます。
jQueryで半角英数字と全角英数字を相互変換
多分、半角と全角の相互変換は、フォームの入力規制などで使用されることのほうが多いのではないかと思います。
テキストボックスの英数字を半角と全角に相互変換する
以下のテキストボックスでは、半角英数字を入力すると強制的に全角に置換します。
以下のテキストボックスでは逆に、全角英数字を入力すると強制的に半角に置換します。
これらは、以下のjQueryスクリプトのchangeイベントにより、input要素に入力された値を、半角から全角、全角から半角に変換しています。
スクリプトは、<body></body>タグの</body>で閉じる直前あたりに挿入するのが良いと思います。
HTML
<!-- ↓半角を全角に置換↓ --> <form> <input type="text" size="40" class="halfwidth-fullwidth" placeholder="半角英数字を入力してみてください" /> </form> <!-- ↓全角を半角に置換↓ --> <form> <input type="text" size="40" class="fullwidth-halfwidth" placeholder="全角英数字を入力してみてください" /> </form>
jQuery
(function($){
//半角を全角に置換
$('.halfwidth-fullwidth').change(function(){
var text = $(this).val();
var str = text.replace(/[A-Za-z0-9]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) + 65248);
});
$(this).val(str);
});
//全角を半角に置換
$('.fullwidth-halfwidth').change(function(){
var text = $(this).val();
var str = text.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 65248);
});
$(this).val(str);
});
})(jQuery);
HTML要素に対して読み込み直後に半角全角を相互に変換する
私の案件の場合は、トップページの読み込み時に行う必要があったので、eachメソッドを用い、val() ではなく html() で。
jQuery
(function($){
//半角を全角に置換
$('.halfwidth-fullwidth').each(function(){
var text = $(this).html();
var str = text.replace(/[A-Za-z0-9]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) + 65248);
});
$(this).html(str);
});
//全角を半角に置換
$('.fullwidth-halfwidth').each(function(){
var text = $(this).html();
var str = text.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 65248);
});
$(this).html(str);
});
})(jQuery);
以上、ご参考になれば幸いです。
コメント