星期一, 4月 20, 2015

[jQuery API] 如何讓元素透過tabindex來達到Focus效果

今天在實作一個下拉選單顯示與隱藏的效果(透過點擊一個按鈕)
當下拉選單出現時,設定呼叫focus(),反之在失去Focus時,會自動hide。

加入tabindex屬性,讓元素(div or ul)支援focus方法

//再focus執行前,加入tabindex屬性
  $dropdownMenu.attr('tabindex',-1).fadeIn().focus();

偵測被Focus的元素的方法

// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

去除瀏覽器的tabindex外框

當你讓選單focus的時候,會發現外框出現的色框


可以透過以下css,讓border消失

:focus { 
    outline: none; 
}

參考


沒有留言:

張貼留言

留個話吧:)

其他你感興趣的文章

Related Posts with Thumbnails