728x90
웹 애플리케이션에서 사용자가 입력하는 데이터에서 공백을 방지해야 할 때가 있습니다. 특히 ID, 비밀번호, 특정 코드 입력란에서는 공백이 들어가지 않도록 제한하는 것이 필요할 수 있습니다. 이를 위해 JavaScript와 jQuery를 사용하여 <input> 태그에서 공백 입력을 방지하는 방법을 알아보겠습니다.
1. JavaScript를 이용한 공백 입력 방지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input 공백 방지</title>
</head>
<body>
<input type="text" id="username" placeholder="아이디 입력 (공백 불가)">
<script>
document.getElementById("username").addEventListener("keypress", function(event) {
if (event.key === " ") {
event.preventDefault();
}
});
</script>
</body>
</html>설명
- keypress 이벤트를 사용하여 사용자가 입력하는 키를 감지합니다.
- 입력된 키가 space (공백)일 경우 event.preventDefault();를 호출하여 입력을 차단합니다.
2. jQuery를 이용한 공백 입력 방지
$(document).ready(function() {
$("#user-input").on("keypress", function(event) {
if (event.which === 32) {
event.preventDefault();
}
});
});설명
- jQuery의 keypress 이벤트를 활용하여 입력된 키를 감지합니다.
- event.which === 32는 스페이스 키의 키 코드(ASCII 32)를 의미하며, 이를 감지하여 event.preventDefault();로 입력을 막습니다.
3. 추가 기능: 입력된 값에서 공백 자동 제거하기
만약 사용자가 복사 & 붙여넣기 또는 다른 방식으로 공백을 입력하는 경우를 방지하려면 다음과 같이 input 값이 변경될 때 공백을 제거하는 로직을 추가할 수 있습니다.
$("#user-input").on("input", function() {
$(this).val($(this).val().replace(/\s/g, ""));
});설명
- input 이벤트를 감지하여 입력된 값에서 모든 공백 (\s)을 제거합니다.
- 사용자가 복사 & 붙여넣기로 공백이 포함된 텍스트를 입력하더라도 자동으로 공백이 제거됩니다.
LIST
'Develop' 카테고리의 다른 글
| 로그 파일에서 특정 문자열 찾기 cat, more 및 기타 명령어 활용법 (1) | 2025.02.24 |
|---|---|
| [Javascript] html javascript 로 엑셀 다운로드 구현. 총정리 (1) | 2025.02.21 |
| [JavaScript] ajax post 요청 form 내용 json 으로 전송 (0) | 2025.02.21 |
| Spring Framework의 Scheduled 스케줄 동적으로 실행 방법 (4) | 2025.02.17 |
| 리눅스 서버 시간 확인하는 다양한 방법 (1) | 2025.02.14 |