그누보드 글쓰기 폼 특정 필드 숫자만 입력 제한 스크립트 적용 방법

• 목록
• 스크랩

그누보드 글쓰기 폼 특정 필드 숫자만 입력 제한 스크립트 적용 방법

그누보드 게시판 글쓰기 폼에서 여분필드 등 특정 입력 필드에 사용자가 문자를 입력하여 발생하는 데이터 오류를 방지하기 위해, 실시간으로 숫자만 입력되도록 제한하는 스크립트 적용 방법을 확인합니다.

그누보드 글쓰기 폼 특정 필드 숫자만 입력 제한 스크립트 적용 방법

그누보드 게시판 글쓰기 폼의 여분필드 등 특정 입력 필드에 사용자가 문자를 입력할 때 실시간으로 이를 감지하여 숫자만 입력되도록 제한하려면, 사용하는 게시판 스킨 파일인 write.skin.php에 jQuery 기반의 이벤트 리스너 스크립트를 추가해야 합니다.

1. 필드 name 확인하기

글쓰기 폼에서 숫자 입력을 제한할 입력 필드의 name 속성값을 확인합니다. 예를 들어 여분필드 1번인 경우 아래와 같이 설정되어 있습니다.

<input type="text" name="wr_1" value="<?php echo $write['wr_1']?>" id="wr_1" class="frm_input" size="20">

2. write.skin.php 파일 하단에 스크립트 추가

숫자 이외의 문자가 입력되었을 때 경고 메시지를 띄우고 값을 초기화하기 위해, write.skin.php 파일 하단에 아래의 자바스크립트 코드를 추가합니다.

<script>
$(document).on("keyup", "input[name^=wr_1]", function() {
 var val = $(this).val();
 if(val.replace(/[0-9]/g, "").length > 0) {
 alert("숫자만 입력해 주십시오.");
 $(this).val('');
 }
});
</script>

• 단일 필드가 아닌 둘 이상의 필드(예: wr_1, wr_2)에 동시에 적용하고 싶다면 선택자 부분을 쉼표(,)로 구분하여 아래와 같이 수정하여 계속 추가할 수 있습니다.

  $(document).on(
  "keyup",
  "input[name^=wr_1], input[name^=wr_2]",
  function() {
  // 처리 로직
  }
  );

3. 동작 확인

수정 완료 후 브라우저의 해당 게시판 글쓰기 페이지에서 대상 입력 필드(wr_1 등)에 숫자가 아닌 문자를 타이핑했을 때, 즉시 경고창이 나타나며 입력된 값이 빈값으로 초기화되는지 확인합니다.

다중 필드 숫자 입력 제한 스크립트 수정 방법

그누보드 글쓰기 폼에서 wr_1, wr_2 등 둘 이상의 필드에 동시에 숫자만 입력되도록 제한하려면 jQuery 이벤트 리스너의 선택자 부분을 쉼표(,)로 구분하여 계속 추가하면 됩니다.

적용 방법

1. 수정할 파일인 write.skin.php 하단에 스크립트를 추가합니다.
2. 여러 개의 입력 필드 네임 값을 지정할 때 아래와 같이 쉼표로 연결합니다.

<script>
$(document).on("keyup", "input[name^=wr_1], input[name^=wr_2]", function() {
 var val = $(this).val();
 if (val.replace(/[0-9]/g, "").length > 0) {
 alert("숫자만 입력해 주십시오.");
 $(this).val('');
 }
});
</script>

조건 및 예외 사항

• 대상 필드의 name 속성 값이 wr_1, wr_2 등으로 시작하거나 일치하는 경우에 적용됩니다.
• 숫자가 아닌 문자가 포함되어 감지될 경우 경고창(alert)이 출력되고 입력된 값이 빈값으로 초기화됩니다.

게시판 글쓰기 폼 특정 필드 숫자 입력 제한하기

그누보드5 게시판 글쓰기 폼(write.skin.php)의 여분필드 등 특정 입력 필드에 오직 숫자만 입력되도록 실시간으로 제한하려면, jQuery의 keyup 이벤트와 정규식을 활용하는 스크립트를 파일 하단에 추가합니다.

1. 적용 대상 필드 확인

글쓰기 스킨 파일인 write.skin.php에서 숫자만 입력받을 필드의 name 속성을 확인합니다. 예를 들어 여분필드 1번인 경우 다음과 같이 구성되어 있습니다.

<tr>
 <th scope="row">판매가격</th>
 <td><input type="text" name="wr_1" value="<?php echo $write['wr_1']?>" id="wr_1" class="frm_input" size="20"></td>
</tr>

2. 숫자 제한 스크립트 추가

write.skin.php 파일 하단에 아래의 스크립트를 추가합니다. 숫자가 아닌 문자가 입력되면 경고 메시지가 출력되고 입력값이 비워집니다.

<script>
$(document).on("keyup", "input[name^=wr_1]", function() {
 var val = $(this).val();
 if(val.replace(/[0-9]/g, "").length > 0) {
 alert("숫자만 입력해 주십시오.");
 $(this).val('');
 }
});
</script>

3. 여러 필드 동시 적용 방법

하나가 아닌 둘 이상의 필드(예: wr_1, wr_2)에 동시에 숫자에 대한 입력을 제한하고 싶을 때는 첫 줄의 선택자를 쉼표(,)로 구분하여 계속 추가합니다.

<script>
$(document).on("keyup", "input[name^=wr_1], input[name^=wr_2]", function() {
 var val = $(this).val();
 if(val.replace(/[0-9]/g, "").length > 0) {
 alert("숫자만 입력해 주십시오.");
 $(this).val('');
 }
});
</script>

그누보드 글쓰기 폼 특정 필드 숫자 입력 제한 적용

• 내 상황: 게시판 글쓰기 폼(여분필드 등)에 사용자가 문자를 입력하여 데이터 오류가 발생하는 경우
• 선택 기준: write.skin.php 파일 하단에 jQuery keyup 이벤트와 정규식(replace(/[0-9]/g, ""))을 사용하여 실시간으로 숫자가 아닌 입력을 감지하고 초기화
• 다음 행동: write.skin.php 하단에 스크립트를 추가한 뒤, 브라우저에서 문자를 입력하여 경고창과 함께 값이 빈값으로 초기화되는지 확인

실전 FAQ

Q. 하나가 아니라 여러 개의 필드(예: wr1, wr2)에 동시에 숫자 입력을 제한하려면 어떻게 해야 하나요?

• 예외 및 대안: jQuery 선택자 안에서 쉼표(,)로 구분하여 input[name^=wr_1], input[name^=wr_2] 형태로 계속 추가하면 다중 필드에 일괄 적용할 수 있습니다.

함께 보면 좋은 글

• 그누보드 글쓰기 폼 제목 및 내용 숨김·자동 입력 처리 방법
• 그누보드 게시판 주말 글쓰기 제한 및 중복 등록 방지 설정 방법
• 그누보드 게시판 글쓰기 필수 입력 항목(제목·내용) 우회 및 강제 값 설정 방법

참고자료

기타 참고자료

• gnustudy.com — input 필드값을 입력받을 때 무조건 숫자만 입력 스크립트 - 게시판스킨강좌, 그누보드5강좌