読者です 読者をやめる 読者になる 読者になる

入力フィールドでよく使いそうな jQuery 処理のメモ

jQuery

HTML 入力フィールドでよく使いそうな jQuery 処理をまとめる。

/**
 * input-support.js
 */
/* for 全角数字入力→ 半角数字 */
var numberConvert = function(value){
   var str = new String(value);
   var han = str.replace(/[0-9]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0); });
   return han.replace(/^[\-|ー|―|-]/, function(s){ return '-'; }).replace(/[。.]/g, ".");
};
/* 全角英数字→半角英数字 */
var zenkakuTohan = function(txt){
   return txt.replace(/[A-Za-z0-9]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0); }).replace(/[。.]/g, ".");
};
/* 全角数字→半角数字 */
var zenkakuNumToHan = function(txt){
   return txt.replace(/[0-9]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0); });
};
/* ひらがな→カタカナ */
var hirakanaTokatakana = function(txt){
   return txt.replace(/[ぁ-ん]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)+0x0060); });
}
/* カタカナ→ひらがな */
var hirakanaTokatakana = function(txt){
   return txt.replace(/[ァ-ン]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0x0060); });
}
/* 日付入力チェック */
var isValidDate = function(s){
   if (!s.match(/^\d{4}\/(0{0,1}[1-9]|1[012])\/(0{0,1}[1-9]|[12][0-9]|3[01])$/)){
      return false;
   }
   var ary = s.split(/\//);
   var y = ary[0];
   var m = parseInt(ary[1], 10);
   var d = parseInt(ary[2], 10);
   if(m < 1 || m > 12 || d < 1 || d > 31) {
      return false;
   }
   var dt = new Date(y, m - 1, d, 0, 0, 0, 0);
   if(dt.getFullYear() != y || dt.getMonth() != m - 1 || dt.getDate() != d){
      return false;
   }
   return true;
};
/* 数値→3桁区切り : 逆は、.replace(/,/g, ''); を使う */
var digitFormat = function(str){
   var num = new String(str).replace(/,/g, "");
   while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
   return num;
}
/**
 * 半角英数字入力:全角英数字入力は強制的に半角英数字入力
 * inputHankakuANK( selector );
 */
var inputHankakuANK = function(input){
   $(input).focus(function(eo){
      $(this).select();
   }).blur(function(eo){
      $(this).val(zenkakuTohan($(this).val()));
   }).bind("paste",function(){
      return false;
   }).keyup(function(eo){
      $(this).val(zenkakuTohan($(this).val()));
   });
};
/**
 * 半角英数字、記号のみしか打てない。
 * inputHankakuANKForce( selector , { numlock : function(){...} } );
 *   numlock: NumLock OFF(消灯) で入力できない時の関数
 */
var inputHankakuANKForce = function(input, options){
   $(input).focus(function(eo){
      $(this).prop('type','tel');
   }).blur(function(eo){
      $(this).prop('type','text');
   }).bind("paste",function(){
      return false;
   }).keydown(function(eo){
      if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40 || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
         if (event.getModifierState("NumLock")===false){
            if (options !== undefined && options['numlock'] !== undefined){
               options['numlock']();
            }
         }
      }
      if (eo.keyCode==229){
         return false;
      }
   });
};
/**
 * 整数入力:
 * inputInteger( selector , { numlock : function(){...} } );
 *   numlock: NumLock OFF(消灯) で入力できない時の関数
 */
var inputInteger = function(input, options){
   $(input).focus(function(eo){
      $(this).select();
   }).bind("paste",function(){
      return false;
   }).keyup(function(eo){
      $(this).val(numberConvert($(this).val()).replace(/[^\-0-9]/g, ''));
   }).keydown(function(eo){
      if ($(this).val()!=="" && eo.keyCode==189) return false;
      if ($(this).val()=="0"){ $(this).select(); }
      if ($(this).val()=="-"){
         if (eo.keyCode==48 || eo.keyCode==96) return false;
      }
      if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40 || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
         if (event.getModifierState("NumLock")===false){
            if (options !== undefined && options['numlock'] !== undefined){
               options['numlock']();
            }
         }
      }
   });
};
/**
 * 整数入力:IMEが全角だと反応させない
 * inputIntgerForce( selector , { numlock : function(){...} } );
 *   numlock: NumLock OFF(消灯) で入力できない時の関数
 */
var inputIntegerForce = function(input, options){
   $(input).focus(function(eo){
      $(this).prop('type','tel');
      $(this).select();
   }).blur(function(eo){
      $(this).prop('type','text');
   }).bind("paste",function(){
      return false;
   }).keyup(function(eo){
      $(this).val($(this).val().replace(/[^\-0-9]/g, ''));
   }).keydown(function(eo){
      if ($(this).val()!=="" && eo.keyCode==189) return false;
      if ($(this).val()=="0"){ $(this).select(); }
      if ($(this).val()=="-"){
         if (eo.keyCode==48 || eo.keyCode==96) return false;
      }
      if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40 || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
         if (event.getModifierState("NumLock")===false){
            if (options !== undefined && options['numlock'] !== undefined){
               options['numlock']();
            }
         }
      }
      if (eo.keyCode==229){
         return false;
      }
   });
};
/**
 * コード入力:マイナスは許さない
 * inputNumber( selector , { numlock : function(){...} } );
 *   numlock: NumLock OFF(消灯) で入力できない時の関数
 */
var inputNumber = function(input, options){
   $(input).focus(function(eo){
      $(this).select();
   }).bind("paste",function(){
      return false;
   }).keyup(function(eo){
      $(this).val(numberConvert($(this).val()).replace(/[^0-9]/g, ''));
   }).keydown(function(eo){
      if (eo.keyCode==189) return false;
      if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40 || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
         if (event.getModifierState("NumLock")===false){
            if (options !== undefined && options['numlock'] !== undefined){
               options['numlock']();
            }
         }
      }
   });
};
/**
 * コード入力:IMEが全角だと反応させない
 * inputNumberForce( selector , { numlock : function(){...} } );
 *   numlock: NumLock OFF(消灯) で入力できない時の関数
 */
var inputNumberForce = function(input, options){
   $(input).focus(function(eo){
      $(this).prop('type','tel');
      $(this).select();
   }).blur(function(eo){
      $(this).prop('type','text');
   }).bind("paste",function(){
      return false;
   }).keyup(function(eo){
      $(this).val($(this).val().replace(/[^\0-9]/g, ''));
   }).keydown(function(eo){
      if (eo.keyCode==189) return false;
      if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40 || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
         if (event.getModifierState("NumLock")===false){
            if (options !== undefined && options['numlock'] !== undefined){
               options['numlock']();
            }
         }
      }
      if (eo.keyCode==229){
         return false;
      }
   });
};

/**
 * 金額入力 :
 * inputPriceForce( selector , { numlock : function(){...} } );
 *   numlock: NumLock OFF(消灯) で入力できない時の関数
 */
var inputPrice = function(input, options){
   $(input).focus(function(eo){
      $(this).select();
   }).bind("paste",function(){
      return false;
   }).keyup(function(eo){
      $(this).val(digitFormat(numberConvert($(this).val()).replace(/[^\-0-9]/g, '')));
   }).keydown(function(eo){
      if ($(this).val()!=="" && eo.keyCode==189) return false;
      if ($(this).val()=="0"){ $(this).select(); }
      if ($(this).val()=="-"){
         if (eo.keyCode==48 || eo.keyCode==96) return false;
      }
      if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40 || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
         if (event.getModifierState("NumLock")===false){
            if (options !== undefined && options['numlock'] !== undefined){
               options['numlock']();
            }
         }
      }
   });
};
/**
 * 金額入力 : IMEが全角だと反応させない
 * inputPriceForce( selector , { numlock : function(){...} } );
 *   numlock: NumLock OFF(消灯) で入力できない時の関数
 */
var inputPriceForce = function(input, options){
   $(input).focus(function(eo){
      $(this).prop('type','tel');
      $(this).select();
   }).blur(function(eo){
      $(this).prop('type','text');
   }).bind("paste",function(){
      return false;
   }).keyup(function(eo){
      $(this).val(digitFormat($(this).val().replace(/[^\-0-9]/g, '')));
   }).keydown(function(eo){
      if ($(this).val()!=="" && eo.keyCode==189) return false;
      if ($(this).val()=="0"){ $(this).select(); }
      if ($(this).val()=="-"){
         if (eo.keyCode==48 || eo.keyCode==96) return false;
      }
      if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40 || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
         if (event.getModifierState("NumLock")===false){
            if (options !== undefined && options['numlock'] !== undefined){
               options['numlock']();
            }
         }
      }
      if (eo.keyCode==229){
         return false;
      }
   });
};
/**
 * 電話番号入力:
 * inputPhone( selector , { numlock : function(){...} } );
 *   numlock: NumLock OFF(消灯) で入力できない時の関数
 */
var inputPhone = function(input, options){
   $(input).focus(function(eo){
      $(this).select();
   }).bind("paste",function(){
      return false;
   }).keyup(function(eo){
      $(this).val(numberConvert($(this).val()).replace(/[^\-0-9]/g, ''));
   }).keydown(function(eo){
      if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40 || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
         if (event.getModifierState("NumLock")===false){
            if (options !== undefined && options['numlock'] !== undefined){
               options['numlock']();
            }
         }
      }
   });
};
/**
 * 電話番号入力:IMEが全角だと反応させない
 * inputPhoneForce( selector , { numlock : function(){...} } );
 *   numlock: NumLock OFF(消灯) で入力できない時の関数
 */
var inputPhoneForce = function(input, options){
   $(input).focus(function(eo){
      $(this).prop('type','tel');
      $(this).select();
   }).blur(function(eo){
      $(this).prop('type','text');
   }).bind("paste",function(){
      return false;
   }).keyup(function(eo){
      $(this).val($(this).val().replace(/[^\-\0-9]/g, ''));
   }).keydown(function(eo){
      if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40 || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
         if (event.getModifierState("NumLock")===false){
            if (options !== undefined && options['numlock'] !== undefined){
               options['numlock']();
            }
         }
      }
      if (eo.keyCode==229){
         return false;
      }
   });
};

/**
 * Tooltip 実行
 */
var callTooltip = function(input, message){
   $(input).prop("title", "");
   $(input).tooltip({
      content: message,
      show: { effect: "slideDown" },
      hide: { effect: "slideDown" },
   });
   $(input).tooltip("open");
   setTimeout("$('" + input + "').tooltip('close');", 2000);
};