JavaScript 是一種廣泛應(yīng)用于網(wǎng)頁(yè)開(kāi)發(fā)中的編程語(yǔ)言，它提供了強(qiáng)大的交互功能，讓我們?cè)诰W(wǎng)頁(yè)中實(shí)現(xiàn)各種實(shí)用的特效效果。其中，輸入框焦點(diǎn)功能也是 JavaScript 最為常用的功能之一，因?yàn)樗梢詭椭覀冊(cè)鰪?qiáng)輸入框的交互性和用戶體驗(yàn)。

那么，什么是輸入框焦點(diǎn)呢？簡(jiǎn)單來(lái)說(shuō)，輸入框焦點(diǎn)就是在用戶操作輸入框時(shí)，輸入框會(huì)發(fā)生顏色變化，提示用戶當(dāng)前輸入框處于活躍狀態(tài)。在 JavaScript 中，我們可以使用焦點(diǎn)事件 (focus 和 blur) 來(lái)控制輸入框焦點(diǎn)的變化。

// 給輸入框添加焦點(diǎn)事件
var input = document.querySelector("#my-input");
input.addEventListener("focus", function() {
input.style.backgroundColor = "yellow";
});
input.addEventListener("blur", function() {
input.style.backgroundColor = "white";
});

上述代碼演示了一個(gè)最基本的輸入框焦點(diǎn)事件，當(dāng)用戶點(diǎn)擊輸入框時(shí)，輸入框的背景色將變?yōu)辄S色，當(dāng)用戶點(diǎn)擊其他區(qū)域時(shí)，輸入框的背景色將恢復(fù)為白色。

除了基本的焦點(diǎn)事件控制之外，我們還可以使用 JavaScript 控制輸入框的值、樣式等屬性，并根據(jù)用戶的輸入完成一些高級(jí)操作。以下是一些常見(jiàn)的輸入框焦點(diǎn)應(yīng)用：

1. 輸入框驗(yàn)證

// 給輸入框添加失焦事件
var input = document.querySelector("#my-input");
input.addEventListener("blur", function() {
var val = input.value;
if (val.length < 6) {
alert("密碼長(zhǎng)度不能小于6位！");
input.focus();
}
});

上述代碼演示了一個(gè)簡(jiǎn)單的輸入框驗(yàn)證，當(dāng)用戶輸入的密碼長(zhǎng)度小于6位時(shí)，會(huì)彈出提示框，并自動(dòng)將焦點(diǎn)重新定位到輸入框，提醒用戶重新輸入。

2. 自動(dòng)補(bǔ)全

// 給輸入框添加鍵盤(pán)事件
var input = document.querySelector("#my-input");
input.addEventListener("keyup", function() {
var val = input.value;
if (val == "hello") {
input.value = "你好";
}
});

上述代碼演示了一個(gè)簡(jiǎn)單的輸入框自動(dòng)補(bǔ)全，當(dāng)用戶輸入“hello”時(shí)，自動(dòng)將輸入框的值替換為“你好”。

3. 輸入框聯(lián)想

// 給輸入框添加鍵盤(pán)事件
var input = document.querySelector("#my-input");
var dataList = ["蘋(píng)果", "香蕉", "橙子", "西瓜"];
input.addEventListener("keyup", function() {
var val = input.value;
var suggestList = "";
for (var i = 0; i < dataList.length; i++) {
if (dataList[i].indexOf(val) != -1) {
suggestList += "<li>" + dataList[i] + "</li>";
}
}
document.querySelector("#suggestList").innerHTML = suggestList;
});

上述代碼演示了一個(gè)輸入框聯(lián)想的功能，當(dāng)用戶輸入內(nèi)容時(shí)，會(huì)動(dòng)態(tài)地顯示與輸入內(nèi)容相匹配的聯(lián)想詞列表。其中，聯(lián)想詞列表的 HTML 結(jié)構(gòu)如下：

<ul id="suggestList"></ul>

總之，無(wú)論是基本的焦點(diǎn)事件控制還是高級(jí)的輸入框功能，JavaScript 都可以幫助我們實(shí)現(xiàn)更加豐富的用戶體驗(yàn)。只需要掌握一些基本的 JavaScript 知識(shí)，就可以輕松地完成各種實(shí)用的網(wǎng)頁(yè)交互效果。