📖
<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칸으로
앞뒤 공백 제거
✅ 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칸으로
앞뒤 공백 제거
댓글목록
등록된 댓글이 없습니다.
![]() ![]() |