TextBox 숫자만 입력
ASP.NET 의 TextBox 에 날짜를 입력받기 위해 Client Script를 붙혀봤습니다.
숫자만 입력을 받을때 응용해서 사용할 수 있겠군요.
keydown, fouce, blur 이벤트에서 사용할 function입니다.
<script type="text/javascript">
function checkInputDate(ctr) {
var e = window.event;
var txt = document.getElementById(ctr.id);
if (e.keyCode == 8 || e.keyCode == 9 || e.keyCode == 46) {
return true;
}
else if ( (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105) ) {
if (txt.value.length >= 8) {
e.returnValue = false;
return false;
}
return true;
}
else {
e.returnValue = false;
return false;
}
}
function setDateFormat(ctr) {
var txt = document.getElementById(ctr.id);
var val = txt.value;
if (val.length == 8) {
txt.value = val.substr(0, 4) + "-" + val.substr(4, 2) + "-" + val.substr(6, 2);
}
}
function resetDateFormat(ctr) {
var txt = document.getElementById(ctr.id);
var val = txt.value;
if (val.length == 10) {
txt.value = val.replace(/-/gi, "");
txt.select();
}
}
function setRegNo(obj) {
// 주민등록번호 Format
var val = obj.value;
if (val.length == 13) {
obj.value = String.format("{0}-{1}", val.substr(0, 6), val.substr(6));
}
}
function resetRegNo(obj) {
// 주민등록번호 Unformat
var val = obj.value;
obj.value = val.replace(/-/gi, "");
obj.select();
}
function checkInputNumber(ctr, canSPchar, maxlen) {
// ctr 컨트롤
// canSPchar 특수문자 허용
// length 최대길이
var e = window.event;
var txt = document.getElementById(ctr.id);
if (e.keyCode == 8 || e.keyCode == 9 || e.keyCode == 46 || e.keyCode == 13) {
// 허용키 BackSpace, Tab, Delete Key, Insert, Enter
return true;
}
else if (canSPchar && (e.keyCode == 189 || e.keyCode == 190 || e.keyCode == 110 || e.keyCode == 109) ) {
// .-
if (txt.value.length == 0) {
// 첫자리에 올수 없다
e.returnValue = false;
return false;
}
return true;
}
else if ( (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105) ) {
// 숫자 허용
if (maxlen != 0 && txt.value.length >= maxlen) {
// 길이체크
e.returnValue = false;
return false;
}
return true;
}
else {
e.returnValue = false;
return false;
}
}
</script>
<asp:TextBox ID="txt일자" runat="server" Width="80px" TabIndex="4" Style="text-align: center; ime-mode: disabled;" onkeydown="checkInputDate(this);" onkeypress="checkInputDate(this);" onblur="setDateFormat(this);" onfocus="resetDateFormat(this);" />
jQuery를 사용
$(document).ready(
function(){
$("#btnSearch").click(
function(){
if($("#txtFr").val() == ""){
alert("조회 시작일자를 입력하세요.");
$("#txtFr").focus();
return false;
}
else if($("#txtTo").val() == ""){
alert("조회 종료일자를 입력하세요.");
$("#txtTo").focus();
return false;
}
else{
var form = $("#MyForm");
form.submit();
}
});
$("#txtFr,#txtTo").keydown(
function(e){
if (e.keyCode == 8 || e.keyCode == 9 || e.keyCode == 46) {
return true;
}
else if ( (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105) ) {
if ($(this).val().length >= 10) {
e.returnValue = false;
return false;
}
return true;
}
else {
e.returnValue = false;
return false;
}
});
$("#txtFr,#txtTo").focus(
function(){
var val = $(this).val();
$(this).val(val.replace(/-/gi, ""));
});
$("#txtFr,#txtTo").focusout(
function(){
var val = $(this).val();
if (val.length == 8) {
$(this).val(val.substr(0, 4) + "-" + val.substr(4, 2) + "-" + val.substr(6, 2));
}
});
});