javascript如何處理焦點
- 藏色散人原創
- 2021-10-18 14:11:542304瀏覽
javascript處理焦點的方法：1、透過「field.focus();」方法取得焦點；2、透過「o[i].blur = function(){...}」方法處理失去焦點。
本文操作環境：windows7系統、javascript1.8.5版、DELL G3電腦
javascript如何處理焦點？
JavaScript焦點處理（取得焦點focus、失去焦點blur）
#焦點處理
焦點處理主要包含focus（取得焦點）和blur（失去焦點）事件類型。所謂焦點，就是啟動表單字段，使其可以回應鍵盤事件。
取得焦點：focus
當點擊或使用Tab鍵切換到某個表單元素或超連結物件時，會觸發該事件。 focus事件是確定頁面內滑鼠目前定位的一種方式。在預設情況下，整個文件處於焦點狀態，但是按一下或使用Tab鍵可以改變焦點位置。 '
範例：在頁面載入完畢後，將焦點轉移到表單中的第一個文字方塊字段，讓其準備接收使用者輸入
<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>失去焦點：blur
blur事件類型表示在元素失去焦點時回應，它與focus事件類型是對應的，主要作用於表單元素和超連結物件
範例：為所有輸入表單元素綁定了focus和blur事件處理函數，設定當元素獲取焦點時呈凸起，失去焦點呈凹陷
<!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>
注意：如果時隱藏字段（），或使用CSS的display和visibility隱藏欄位顯示，設定其獲取焦點將引發異常。
推薦學習：《javascript基礎教學》
#以上是javascript如何處理焦點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn