입력 필드에 포커스가 유지되는 동안 콘솔에 메시지를 표시하려면 JavaScript의 focus() 개념을 활용할 수 있습니다. blur 이벤트와 focus() 메서드를 함께 사용하면, 사용자가 입력 필드에서 포커스를 잃더라도 자동으로 다시 포커스를 설정하여 원하는 메시지를 콘솔에 출력할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/
4.7.0/css/font-awesome.min.css">
</head>
<body>
<input id='txtInput' placeholder="Enter the value......."/>
<button id='submitBtn'>Submit</button>
<script>
const submitButton = document.getElementById('submitBtn');
submitButton.addEventListener('click', () => {
console.log('Submitting information to the server.....');
})
const txtInput = document.getElementById('txtInput');
txtInput.addEventListener('blur', () => {
console.log('Enter the new value into the text box......');
txtInput.focus();
});
txtInput.focus();
</script>
</body>
</html>코드 설명
- blur 이벤트: 입력 필드(txtInput)에서 포커스가 벗어나는 순간 발생하며, 이때 콘솔에 안내 메시지를 출력합니다.
- focus() 메서드: blur 이벤트 발생 직후 입력 필드에 포커스를 다시 설정하여, 사용자가 계속해서 값을 입력하도록 유도합니다.
- Submit 버튼: 클릭 시 서버로 정보를 전송한다는 메시지를 콘솔에 기록합니다.
프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html"(index.html)로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
위 프로그램을 실행하면 다음과 같은 출력 결과가 나타납니다.
입력 텍스트 상자에 포커스가 설정된 후의 화면은 다음과 같습니다.
