溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

javascript怎么處理焦點(diǎn)

發(fā)布時(shí)間：2021-10-18 14:34:18 來(lái)源：億速云 閱讀：118 作者：iii 欄目：web開(kāi)發(fā)

本篇內(nèi)容主要講解“javascript怎么處理焦點(diǎn)”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“javascript怎么處理焦點(diǎn)”吧!

javascript處理焦點(diǎn)的方法：1、通過(guò)“field.focus();”方法獲取焦點(diǎn)；2、通過(guò)“o[i].blur = function(){...}”方法處理失去焦點(diǎn)。

javascript怎么處理焦點(diǎn)

本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、DELL G3電腦

javascript如何處理焦點(diǎn)？

JavaScript焦點(diǎn)處理（獲取焦點(diǎn)focus、失去焦點(diǎn)blur）

焦點(diǎn)處理

焦點(diǎn)處理主要包括focus（獲取焦點(diǎn)）和blur（失去焦點(diǎn)）事件類型。所謂焦點(diǎn)，就是激活表單字段，使其可以響應(yīng)鍵盤(pán)事件。

獲取焦點(diǎn)：focus

當(dāng)單擊或使用Tab鍵切換到某個(gè)表單元素或超鏈接對(duì)象時(shí)，會(huì)觸發(fā)該事件。focus事件是確定頁(yè)面內(nèi)鼠標(biāo)當(dāng)前定位的一種方式。在默認(rèn)情況下，整個(gè)文檔處于焦點(diǎn)狀態(tài)，但是單擊或者使用Tab鍵可以改變焦點(diǎn)位置?！?/p>

示例：在頁(yè)面加載完畢后，將焦點(diǎn)轉(zhuǎn)移到表單中的第一個(gè)文本框字段，讓其準(zhǔn)備接收用戶輸入

<form id="myform" method="post" action="#">	
姓名<input type="text" name="name"/><br>	
密碼<input type="password" name="pass" /></form>
<script>	
var form = document.getElementById("myform");	
var field = form.elements("name");	
window.onload = function(){		
field.focus();	
}
</scriipt>

失去焦點(diǎn)：blur

blur事件類型表示在元素失去焦點(diǎn)時(shí)響應(yīng)，它與focus事件類型是對(duì)應(yīng)的，主要作用于表單元素和超鏈接對(duì)象

示例：為所有輸入表單元素綁定了focus和blur事件處理函數(shù)，設(shè)置當(dāng)元素獲取焦點(diǎn)時(shí)呈凸起，失去焦點(diǎn)呈凹陷

<!DOCTYPE html><html>	
<head>		
<meta charset="UTF-8">		
<title></title>	</head>	<body>		
<input type="text" />		
<input type="text" />		
<script>			
var o = document.getElementsByTagName("input");			
for(var i = 0; i < o.length; i++){				
o[i].onfocus = function(){					
this.style.borderStyle = "outset";				
}				
o[i].blur = function(){					
this.style.borderStyle = "inset";				
}			}		
</script>	
</body></html>

javascript怎么處理焦點(diǎn)

注意：如果時(shí)隱藏字段（< input type=“hidden” >），或者使用CSS的display和visibility隱藏字段顯示，設(shè)置其獲取焦點(diǎn)將引發(fā)異常。

到此，相信大家對(duì)“javascript怎么處理焦點(diǎn)”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手