jquery 를 이용해서 html input tag에 숫자와 알파벳만 입력받도록 만든다.
웹 개발을 하다보면 인풋태그에 원하는 값만을 입력 받고 싶을 때가 있다.
현재 게임 운영툴을 개발하면서 숫자만 입력 받고 싶은 경우가 생겼다.
라이브러리를 찾아보았으나 한글이 입력되거나 특수문자가 입력되는 경우가 발생했다.
그래서 기존 라이브러리에 코드를 추가해서 한글이나 특수문자를 막고 숫자만 입력받는 로직을 만들었다.
필요하신분은 참고 하시길.
참고로 숫자입력만 허용하는 로직만 테스트된 상태며, 테스트는 구글 크롬에서만 하였다. (현재 운영툴이 크롬을 대상으로 개발하고 있기 때문)
익스플로러에서는 안됐던 듯 싶다.
사용법은 아래 링크타고 가서 원래 라이브러리파일을 다운 받으면 index.html에 상세히 있다.
https://github.com/johnantoni/jquery.alphanumeric
수정한 코드.
(function($){
$.fn.alphanumeric = function(p) {
p = $.extend({
ichars: "!@#$%^&*()+=[]\\\';,/{}|\":<>?~`.-_ ",
nchars: "",
allow: ""
}, p);
return this.each
(
function()
{
if (p.nocaps) p.nchars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
if (p.allcaps) p.nchars += "abcdefghijklmnopqrstuvwxyz";
s = p.allow.split('');
for ( i=0;i<s.length;i++) if (p.ichars.indexOf(s[i]) != -1) s[i] = "\\" + s[i];
p.allow = s.join('|');
var reg = new RegExp(p.allow,'gi');
var ch = p.ichars + p.nchars;
ch = ch.replace(reg,'');
$(this).keydown
(
function (e)
{
if (!e.charCode) k = String.fromCharCode(e.which);
else k = String.fromCharCode(e.charCode);
// Korean filtering, modified by ktg.
// if (k.charCodeAt(0) == 229) e.preventDefault();
// exception not ascii code, and shift + number keys
if (33 <= e.which && e.which <= 40) return;
// 컨트롤 c,v,x,a는 허용
if (e.ctrlKey && (k.match(/(c|v|x|a)/i) != null)) return;
// 아스키코드 이외의 글자는 막기
if (k.charCodeAt(0) > 127) e.preventDefault();
// 특수문자 막기
if (e.shiftKey&&k.match(/\d+/g)!=null) e.preventDefault();
if (ch.indexOf(k) != -1) e.preventDefault();
if (e.ctrlKey&&k=='v') e.preventDefault();
}
);
$(this).bind('contextmenu',function () {return false});
}
);
};
$.fn.numeric = function(p) {
var az = "abcdefghijklmnopqrstuvwxyz";
az += az.toUpperCase();
p = $.extend({
nchars: az
}, p);
return this.each (function()
{
$(this).alphanumeric(p);
// 복사 붙여넣기 방지 로직
$(this).keyup
(
function (e)
{
var newVal = $(this).val().replace(/[^0-9\s]/gi,"");
if (newVal != $(this).val()) {
$(this).val( $(this).val().replace(/[^0-9\s]/gi,"") );
}
}
);
}
);
};
$.fn.alpha = function(p) {
var nm = "1234567890";
p = $.extend({
nchars: nm
}, p);
return this.each (function()
{
$(this).alphanumeric(p);
}
);
};
})(jQuery);