Hiển thị thông báo trên console khi focus vào ô nhập liệu trong JavaScript

Để làm điều này, bạn có thể sử dụng khái niệm focus(). Dưới đây là mã:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=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="Nhập giá trị......."/>
<button id='submitBtn'>Submit</button>
<script>
  const submitButton = document.getElementById('submitBtn');
  submitButton.addEventListener('click', () => {
    console.log('Đang gửi thông tin đến máy chủ.....');
  })
  const txtInput = document.getElementById('txtInput');
  txtInput.addEventListener('blur', () => {
    console.log('Nhập giá trị mới vào hộp văn bản......');
    txtInput.focus();
  });
  txtInput.focus();
</script>
</body>
</html>

Để chạy chương trình trên, lưu tệp với tên "anyName.html (index.html)" và nhấp chuột phải vào tệp. Chọn tùy chọn "Open with Live Server" trong trình soạn thảo VS Code.

Kết quả

Chương trình sẽ cho ra kết quả sau:

Sau khi focus vào hộp văn bản nhập liệu, bạn sẽ nhận được kết quả sau.