• 목록

<input> 입력 필드에서 사용자가 입력하는 동안 맨앞과 맨뒤의 공백을 실시간으로 제거하려면 JavaScript 이벤트 리스너를 활용하면 됩니다.
input의 input 이벤트를 사용하여 trim() 적용[code]<input type="text" name="mb_1" value="" id="mb_1" size="50" required>

<script>
document.getElementById('mb_1').addEventListener('input', function() {
    this.value = this.value.trimStart(); // 앞쪽 공백 제거 (실시간)
});
document.getElementById('mb_1').addEventListener('blur', function() {
    this.value = this.value.trim(); // 앞뒤 공백 제거 (포커스 잃을 때)
});
</script>[/code]설명
input 이벤트에서 trimStart() 사용 → 입력 중 앞쪽 공백 실시간 제거
blur 이벤트에서 trim() 사용 → 입력을 마치고 포커스를 벗어나면 앞뒤 공백 모두 제거
trimStart()를 사용하여 타이핑 중 뒷부분의 공백은 유지하도록 함 (사용자가 편집 중인 경우 불편 방지)
이제 사용자가 입력할 때 앞 공백이 자동으로 제거되고, 입력이 끝나면 앞뒤 공백이 모두 제거됩니다!