📖
<input>에 한글만 입력 가능하도록 한글 이외의 문자가 있으면 경고창(alert)

페이지 정보

본문

✅ 붙여넣기, 입력 모두 처리
✅ IME(한글 조합) 끝난 뒤에 검사
✅ 한글 이외 문자 발견 시 경고창 띄우고 제거[code]<input type="text"
    name="wr_6"
    value="<?php if($selected_wr6){echo $selected_wr6;}?>"
    id="wr_6"
    class="frm_input full_input required"
    size="50"
    maxlength="255"
    placeholder="한글만 입력 가능."
    onfocus="this.placeholder=''"
    required
/>

<script>
const input = document.getElementById('wr_6');

// 조합 끝난 뒤에 검사
input.addEventListener('compositionend', function() {
  checkKoreanOnly(this);
});

// 붙여넣기나 직접 입력시 검사
input.addEventListener('input', function(e) {
  if (!e.isComposing) {
    checkKoreanOnly(this);
  }
});

function checkKoreanOnly(el) {
  const regex = /[^가-힣]/g;
  if (regex.test(el.value)) {
    alert('한글만 입력할 수 있습니다.');
    el.value = el.value.replace(regex, '');
  }
}
</script>[/code]⚡ 작동 원리
compositionend: 한글 조합 끝나면 검사
input: 붙여넣기나 외부 입력 처리
checkKoreanOnly() 함수: 한글 아닌 문자 있으면 alert → 바로 제거

✅ 공백 허용 버전
👉 한글과 띄어쓰기(공백) 만 허용됩니다.
(예: 홍 길동 가능)[code]<input type="text"
    name="wr_6"
    id="wr_6"
    placeholder="한글과 공백만 입력 가능"
    required
/>

<script>
const input = document.getElementById('wr_6');

input.addEventListener('compositionend', function() {
  checkKoreanSpaceOnly(this);
});

input.addEventListener('input', function(e) {
  if (!e.isComposing) {
    checkKoreanSpaceOnly(this);
  }
});

function checkKoreanSpaceOnly(el) {
  const regex = /[^가-힣\s]/g;  // \s 는 공백 문자
  if (regex.test(el.value)) {
    alert('한글과 공백만 입력할 수 있습니다.');
    el.value = el.value.replace(regex, '');
  }
}
</script>
[/code]
✅ 한글 + 영문 대소문자 + 숫자만 허용 버전
👉 한글 + 영문 대소문자 + 숫자만 허용됩니다.
(예: 홍길동123abcABC 가능)[code]<input type="text"
    name="wr_6"
    id="wr_6"
    placeholder="한글, 영어, 숫자만 입력 가능"
    required
/>

<script>
const input = document.getElementById('wr_6');

input.addEventListener('compositionend', function() {
  checkKoreanEngNumOnly(this);
});

input.addEventListener('input', function(e) {
  if (!e.isComposing) {
    checkKoreanEngNumOnly(this);
  }
});

function checkKoreanEngNumOnly(el) {
  const regex = /[^가-힣a-zA-Z0-9]/g;
  if (regex.test(el.value)) {
    alert('한글, 영어, 숫자만 입력할 수 있습니다.');
    el.value = el.value.replace(regex, '');
  }
}
</script>
[/code]
✅ 한글 + 단일 공백 허용, 앞뒤 공백 제거, 연속 공백 1칸으로 축소, 경고창[code]<input type="text" id="wr_6" placeholder="한글과 공백만 입력" />

<script>
const input = document.getElementById('wr_6');
let isComposing = false;

input.addEventListener('compositionstart', () => {
  isComposing = true;
});
input.addEventListener('compositionend', () => {
  isComposing = false;
  cleanInvalidChars();
});

input.addEventListener('input', () => {
  if (!isComposing) {
    cleanInvalidChars();
  }
});

// 입력 중에는 한글 외 문자만 제거 (공백은 유지)
function cleanInvalidChars() {
  let val = input.value;
  const invalidChars = /[^가-힣\s]/g;

  if (invalidChars.test(val)) {
    alert('한글과 공백만 입력할 수 있습니다.');
  }

  input.value = val.replace(invalidChars, '');
}

// 입력 끝나고(포커스 아웃) 연속 공백, 앞뒤 공백 정리
input.addEventListener('blur', () => {
  let val = input.value;
  val = val.replace(/\s{2,}/g, ' ').trim();
  input.value = val;
});
</script>
[/code]✅ 동작 원리
1️⃣ 타이핑 중에는 공백은 그대로 두고 한글 외 문자만 제거
2️⃣ 포커스 벗어나면(blur)
연속 공백 1칸으로
앞뒤 공백 제거

댓글목록

등록된 댓글이 없습니다.


자료 목록
번호 제목 날짜
📖
🫧
06-28
201
🫧
06-09
200
🫧
06-02
199
🫧
05-23
198
🫧
05-23
197
🫧
05-23
196
🫧
05-23
195
🫧
05-22
194
🫧
05-22
193
🫧
05-22
192
🫧
05-22
191
🫧
05-21
190
🫧
05-16
189
🫧
05-15
188
🫧
05-14

🔍 검색

회사소개 개인정보처리방침 서비스이용약관
Copyright © rainbowgarden.shop All rights reserved.