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); };