Javascript 監聽 焦點

在網頁設計中，JavaScript 監聽焦點是一個非常重要的技術，它可以讓我們在用戶操作界面時，實現更多的交互操作，并且可以大大提升用戶體驗。下面，我將從幾個方面介紹 JavaScript 監聽焦點的應用。

1. 表單驗證

當我們填寫表單時，常常需要驗證表單中的數據是否符合規范，這就需要用到 JavaScript 監聽焦點。比如說，我們在填寫密碼的輸入框中，需要驗證密碼是否符合一定的格式要求，如長度要求、字母和數字組合等，當用戶輸入的內容不符合要求時，我們需要在輸入框下面的提示信息中標紅顯示提示用戶。

/**
 * 監聽密碼輸入框焦點，密碼不符合要求時顯示錯誤提示
 */
var passwordInput = document.getElementById("password");
passwordInput.addEventListener("blur", function() {
var password = passwordInput.value;
if (password.length< 6 || !/\d+/.test(password) || !/[a-zA-Z]+/.test(password)) {
showError("密碼必須由數字、字母組成，長度不小于6位！");
} else {
hideError();
}
});

2. 自動補全提示

當用戶在輸入框中輸入關鍵字時，我們可以通過監聽焦點的方式，實現自動補全提示的功能。比如說，當用戶在搜索輸入框中輸入“Java”，我們可以通過 Ajax 請求后臺接口，獲取與“Java”相關的搜索建議，并在搜索輸入框下面顯示相關的提示內容。

/**
 * 監聽搜索輸入框焦點，實現自動補全提示
 */
var keywordInput = document.getElementById("keyword");
keywordInput.addEventListener("input", function() {
var keyword = keywordInput.value;
if (keyword.length >= 2) {
ajax(function() {
// 請求后端接口，獲取與 keyword 相關的搜索建議
var suggestions = [...];
showSuggestions(suggestions);
});
} else {
hideSuggestions();
}
});

3. 圖片預加載

在加載圖片時，我們可以通過監聽焦點的方式，提高圖片的加載速度和用戶體驗。比如說，當用戶滾動頁面到某個區域時，我們可以預加載該區域中的圖片，當用戶滾動到該區域時，加載已經完成的圖片。

/**
 * 監聽窗口滾動，實現圖片預加載
 */
var container = document.getElementById("container");
var images = [...];
window.addEventListener("scroll", function() {
var scrollViewHeight = container.offsetHeight;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i< images.length; i++) {
if (images[i].offsetTop - scrollTop< scrollViewHeight) {
images[i].src = images[i].getAttribute("data-src");
}
}
});

4. 按鈕禁用與啟用

當用戶點擊按鈕時，我們可以通過監聽焦點的方式，禁用按鈕避免用戶多次點擊，等待處理完成后再啟用按鈕。

/**
 * 監聽提交按鈕點擊，實現禁用與啟用
 */
var submitButton = document.getElementById("submit");
submitButton.addEventListener("click", function() {
submitButton.disabled = true;
ajax(function() {
submitButton.disabled = false;
});
});

以上就是一些 JavaScript 監聽焦點的應用示例，希望能對你有所幫助。