jQuery 플러그인(plugin)으로 숫자입력, 알파벳입력 구현하기 - jquery.alphanum.js
소스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 플러그인(plugin)으로 숫자입력, 알파벳입력 구현하기 - jquery.alphanum.js</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.alphanum.js"></script>
<script>
$(document).ready(function(){
$('#alphanum').alphanum({ allow: '%' });
$('#alphanum').css("ime-mode", "disabled");
$('#numeric').numeric({
maxPreDecimalPlaces : 10,
maxDecimalPlaces : 2
});
$('#numeric').css("ime-mode", "disabled");
});
</script>
</head>
<body>
alphanum()
numeric()
</body>
</html>
설명
$('#alphanum').alphanum({ allow: '%' });
alphanum() 메소드로 알파벳만 입력 받도록 구현합니다.
allow: '%' => 해당 문자는 입력을 허락한다는 뜻입니다. 즉, 알파벳 외에 더 입력받고 싶은 문자를 넣으시면 됩니다.
$('#numeric').numeric({ maxPreDecimalPlaces : 10, maxDecimalPlaces : 2 });
numeric() 메소드로 숫자만 입력받도록 구현합니다.
maxPreDecimalPlaces : 10 => 10자만 입력받겠다는 거구요.
maxDecimalPlaces : 2 => 소수점 2자리까지 입력받는다는 뜻입니다.
$('#alphanum').css("ime-mode", "disabled");
이 플러그인을 외국사람이 만들어서인지 한글이 입력되는 문제가 있습니다.
그래서, 한글이 입력되지 못하도록 막습니다.
http://plugins.jquery.com/alphanum/
여기 가셔서 해당소스를 다운로드 및 예제를 확인하실 수 있습니다.
jquery.alphanum.js
jQuery-alphanum-js.zip혹시나해서 해당 플러그인 js 파일 올려 놓습니다.
아래 실행에서는 한글이 입력될수도 있는데요.
[새창(소스포함)] 클릭하셔서 소스 긁어서 테스트 해보시면 잘 동작할 것입니다.
실행
'프로그래밍 언어 > jQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리 UI 달력/Datepicker/캘린더/Calendar (0) | 2015.07.21 |
|---|---|
| [jQuery] 제이쿼리 페이지 네비게이션 플러그인(plugin) - PageNavigator (페이지 번호) (0) | 2015.07.15 |
| [jQuery] 제이쿼리로 전체선택/선택해제 구현하기 (0) | 2015.07.15 |
| [jQuery] plugin(제이쿼리 플러그인)으로 검색 자동완성(autocomplete) 구현하기 (6) | 2015.07.06 |
| [jQuery] 제이쿼리 항상 가장 최신(마지막) 버전 링크 url 사용하기 (0) | 2015.06.18 |
댓글