GHWEB06.GRASSHOPPER

jQueryで全角入力された英数字を半角変換

  • Category:Web関連
  • Web関連の備忘録

hankaku問合せフォーム等の入力フォームで英数字の半角入力が必要な事があると思います。
そんな場合、全角で入力された英数字を自動で半角変換出来れば素敵かもしれません。

jQueryは、Google Hosted Libraries の バージョン1.11.1 を使用。★バージョン2.1.1でも動作確認。

スクリプトとサンプル

$(function() {
$('.henkan').change(function(){
var text  = $(this).val();
var hen = text.replace(/[A-Za-z0-9]/g,function(s){
		  return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
		  });
$(this).val(hen);
});
});

サンプル

スクリプトの処理内容

$(function() {
//changeイベントはinput要素が変更を完了した時に実行
$('.henkan').change(function(){

//要素のvalue属性を変数に代入。
var text  = $(this).val();

//全角英数字を対象に置き換え
var hen = text.replace(/[A-Za-z0-9]/g,function(s){
		  return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
		  });

//要素のvalue属性に変換した hen を入れる。
$(this).val(hen);
});
});

他にも

問合せフォーム以外にも、WordPressの検索枠に設定すると、全角検索のためヒットしなかった対象が表示されるようになるかもしれません。
只、記事投稿の際に英数字を必ず半角で入力する事が必要。

【指定例】

<input type="text" value="" name="s" id="s" class="henkan">

以上、条件はありますが、ご興味がありましたらお試し下さい。

  • 掲載: