JavaScript 是一種廣泛使用的腳本語言,與 HTML 和 CSS 一起組成了 Web 前端的三大基石。它可以用于創(chuàng)建交互式網(wǎng)頁、動(dòng)態(tài)效果、輪播圖、表單驗(yàn)證等。而在 Web 表單中,獲取焦點(diǎn)、輸入和提交是非常基本的操作,本文將介紹如何使用 JavaScript 實(shí)現(xiàn)表單獲取焦點(diǎn)的功能。
在表單中,有時(shí)我們需要在當(dāng)前輸入框獲取焦點(diǎn)時(shí),對(duì)此進(jìn)行一些處理,例如:修改樣式、添加/刪除文本等。這時(shí)我們就需要使用 JavaScript 來實(shí)現(xiàn)獲取焦點(diǎn)。下面是獲取焦點(diǎn)的兩種方式:
第一種是使用 focus 方法,當(dāng)元素獲得焦點(diǎn)時(shí),即可觸發(fā) focus 事件。示例代碼如下:
// 獲取元素 var input = document.getElementById('input'); // 獲取焦點(diǎn) input.focus();第二種方法是使用 onfocus 事件,當(dāng)元素獲得焦點(diǎn)時(shí),即可觸發(fā) onfocus 事件。示例代碼如下:
// 獲取元素 var input = document.getElementById('input'); // 綁定 onfocus 事件 input.onfocus = function () { alert('該元素已經(jīng)獲取到焦點(diǎn)'); };上述代碼中,我們通過獲取元素的方式,使用 focus 方法或 onfocus 事件來獲取表單中的元素焦點(diǎn)。這兩種方式的區(qū)別在于 focus 事件是元素的一種狀態(tài),而 onfocus 事件是元素的一個(gè)事件。 除了樣式設(shè)置和添加/刪除文本之外,獲取焦點(diǎn)還可以用于表單驗(yàn)證。例如,當(dāng)用戶在輸入框中輸入錯(cuò)誤信息時(shí),我們可以立即給出提示信息:
// 獲取元素 var input = document.getElementById('input'); // 綁定 onblur 事件 input.onblur = function () { // 判斷輸入是否為空 if (this.value == '') { alert('請(qǐng)輸入內(nèi)容'); // 獲取焦點(diǎn) this.focus(); }else{ alert('輸入正確'); } };上述代碼使用 onblur 事件判斷輸入框是否為空,如果為空則提示用戶,然后獲取文本框焦點(diǎn),如果輸入框不為空,則顯示“輸入正確”。 總之,獲取焦點(diǎn)是表單驗(yàn)證處理的一個(gè)重要過程,使得 UI 界面更簡(jiǎn)潔、交互更友好。本文介紹了兩種獲取焦點(diǎn)的方法和如何在表單驗(yàn)證時(shí)使用焦點(diǎn)獲取來實(shí)現(xiàn)錯(cuò)誤驗(yàn)證,了解了以上方法就能為 Web 前端開發(fā)者提供更多的幫助。