javascript中的焦點管理

標籤：javascript   document   function   管理系統   對焦點   

焦點作為javascript中的一個重要功能，基本上和頁面互動都離不開焦點。但卻少有人對焦點管理系統地做總結歸納。本文就javascript中的焦點管理作詳細介紹

 

焦點元素

　　到底哪些元素可以獲得焦點呢？預設情況下，只有表單元素可以獲得焦點。因為只有表單元素可以互動

<input type="text" value="223">

 　　讓非表單元素獲得焦點也是有辦法的，先將tabIndex屬性設定為-1，再調用focus()方法

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<div id="test" style="height:30px;width:100px;background:lightgreen">div</div><button id="btn">div元素獲得焦點</button><script>btn.onclick = function(){    test.tabIndex = -1;    test.focus();    }test.onfocus = function(){    this.style.background = ‘pink‘;}</script>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

activeElement

　　document.activeElement屬性用於管理DOM焦點，儲存著當前獲得焦點的元素

　　[注意]該屬性IE瀏覽器不支援

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<div id="test" style="height:30px;width:100px;background:lightgreen">div</div><button id="btn">div元素獲得焦點</button><script>console.log(document.activeElement);//<body>btn.onclick = function(){    console.log(document.activeElement);//<button>    test.tabIndex = -1;    test.focus();        console.log(document.activeElement);//<div>}</script>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

 

獲得焦點

　　元素獲得焦點的方式有4種，包括頁面載入、使用者輸入(按tab鍵)、focus()方法和autofocus屬性

【1】頁面載入

　　預設情況下，文檔剛剛載入完成時，document.activeElement中儲存的是body元素的引用。文檔載入期間，document.activeElement的值為null

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<script>console.log(document.activeElement);//null</script><body><script>console.log(document.activeElement);//<body></script></body>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

【2】使用者輸入(按tab鍵)

　　使用者通常可以使用tab鍵移動焦點，使用空格鍵啟用焦點。比如，如果焦點在一個連結上，此時按一下空格鍵，就會跳轉到該連結

　　說到tab鍵，就不能不提到tabindex屬性。tabindex屬性用來指定當前HTML元素節點是否被tab鍵遍曆，以及遍曆的優先順序

　　1、如果tabindex=-1，tab鍵跳過當前元素

　　2、如果tabindex=0，表示tab鍵將遍曆當前元素。如果一個元素沒有設定tabindex，預設值就是0

　　3、如果tabindex大於0，表示tab鍵優先遍曆。值越大，就表示優先順序越小

　　下列代碼中，使用tab鍵時，button獲得焦點的順序是2、5、1、3

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<div id="box">    <button tabindex= "3">1</button>    <button tabindex= "1">2</button>    <button tabindex= "0">3</button>    <button tabindex= "-1">4</button>    <button tabindex= "2">5</button>    </div><script>box.onkeyup = function(){    document.activeElement.style.background = ‘pink‘;}</script>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

【3】focus()

　　focus()方法用於將瀏覽器的焦點設定到表單欄位，即啟用表單欄位，使其可以響應鍵盤事件

　　[注意]前面介紹過，若非表單元素，設定為tabIndex為-1，也可以擷取焦點

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<span id="test1" style="height:30px;width:100px;">span</span><input id="test2" value="input"><button id="btn1">span元素獲得焦點</button><button id="btn2">input元素獲得焦點</button><script>btn1.onclick = function(){test1.tabIndex=-1;test1.focus();}btn2.onclick = function(){test2.focus();}</script>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

【4】autofocus

　　HTML5表單欄位新增了autofocus屬性，只要設定這個屬性，不用javascript就能自動把焦點移動到相應欄位　

　　[注意]該屬性只能用於表單元素，普通元素即使設定tabIndex="-1"也不生效

<input autofocus value="abc">

hasFocus()

　　document.hasFocus()方法返回一個布爾值，表示當前文檔之中是否有元素被啟用或獲得焦點。通過檢測文檔是否獲得了焦點，可以知道是不是正在與頁面互動

console.log(document.hasFocus());//true//在兩秒鐘內點擊其他標籤頁，使焦點離開當前頁面setTimeout(function(){    console.log(document.hasFocus());//false},2000);

 

失去焦點

　　如果使用javascript使元素失去焦點，那麼就要使用blur()方法

　　blur()方法的作用是從元素中移走焦點。在調用blur()方法時，並不會把焦點轉移到某個特定的元素上；僅僅是將焦點從調用這個方法的元素上面移走而已

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<input id="test" type="text" value="123"><button id="btn1">input元素獲得焦點</button><button id="btn2">input元素失去焦點</button><script>btn1.onclick = function(){test.focus();}btn2.onclick = function(){test.blur();}</script>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

焦時間點事件

　　焦時間點事件會在頁面獲得或失去焦點時觸發。利用這些事件並與document.hasFocus()方法及 document.activeElement屬性配合，可以知曉使用者在頁面上的行蹤

　　焦時間點事件共包括下面4個

blur

　　blur事件在元素失去焦點時觸發。這個事件不會冒泡

focus

　　focus事件在元素獲得焦點時觸發。這個事件不會冒泡

focusin

　　focusin事件在元素獲得焦點時觸發。這個事件與focus事件等價，但它冒泡

focusout

　　focusour事件在元素失去焦點時觸發。這個事件與blur事件等價，但它冒泡

　　[注意]關於focusin和focusout事件，除了IE瀏覽器支援DOM0級事件處理常式，其他瀏覽器都只支援DOM2級事件處理常式

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<div id="box"style="display:inline-block;padding:25px;background-color:lightgreen;">    <div id="boxIn" style="height: 50px;width: 50px;background-color:pink;">123</div></div><button id="btn1">內容為123的div元素擷取焦點</button><button id="btn2">內容為123的div元素失去焦點</button><button id="reset">還原</button><script>reset.onclick = function(){history.go();}//focus()方法btn1.onclick = function(){    boxIn.tabIndex= -1;    boxIn.focus();}//blur()方法btn2.onclick = function(){    boxIn.blur();}//focusin事件if(boxIn.addEventListener){    boxIn.addEventListener(‘focusin‘,handler)    }else{    boxIn.onfocusin = handler;}function handler(){    this.style.backgroundColor =‘lightblue‘;}if(box.addEventListener){    box.addEventListener(‘focusin‘,handler)    }else{    box.onfocusin = handler;}    //blur事件function fnBlur(){    this.style.backgroundColor = ‘orange‘;}boxIn.onblur = fnBlur;box.onblur = fnBlur;</script>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

　　由運行結果可知，focusin事件可冒泡；而blur事件不可冒泡

　　焦時間點事件常用於表單展示及驗證

　　比如，擷取焦點時，修改背景顏色；失去焦點時，還原背景顏色並驗證

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<div id="box">    <input id="input1" type="text" placeholder="只可以輸入數字">    <input id="input2" type="text" placeholder="只可以輸入漢字">        <span id="tips"></span></div><script>if(box.addEventListener){    box.addEventListener(‘focusin‘,fnIn);    box.addEventListener(‘focusout‘,fnOut);}else{    box.onfocusin = fnIn;    box.onfocusout = fnOut;}function fnIn(e){    e = e || event;    var target = e.target || e.srcElement;    target.style.backgroundColor = ‘lightgreen‘;}function fnOut(e){    e = e || event;    var target = e.target || e.srcElement;    target.style.backgroundColor = ‘initial‘;    //如果是驗證數位文字框    if(target === input1){        if(!/^\d*$/.test(target.value.trim())){            target.focus();            tips.innerHTML = ‘只能輸入數字，請重新輸入‘            setTimeout(function(){                tips.innerHTML = ‘‘            },500);        }    }    //如果是驗證漢字的文字框    if(target === input2){        if(!/^[\u4e00-\u9fa5]*$/.test(target.value.trim())){            target.focus();            tips.innerHTML = ‘只能輸入漢字，請重新輸入‘            setTimeout(function(){                tips.innerHTML = ‘‘            },500);        }    }    }</script>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

javascript中的焦點管理