javascript jquery.keyboard-focus.js

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript jquery.keyboard-focus.js相关的知识,希望对你有一定的参考价值。

/**
 * jquery.keyboard-focus.js (defines classes for when focus was obtained via the keyboard)
 * 
 * @version 0.3
 * Changelog:
 *   * 0.1 Initial implementation
 *   * 0.2 Added support for 'focus' class to appear whenever an element is foccued. 
 *     Useful for browsers like IE6 that don't support :focus
 *   * 0.3 Added support for 'mouse-focus' class so that :focus styles can be strong for keyboard by default
 *     with more subtle style for .mouse-focus events.
 * 
 * @author Andrew Ramsden
 * @see http://irama.org/web/dhtml/key-focus/
 * @license Common Public License Version 1.0 <http://www.opensource.org/licenses/cpl1.0.txt>
 * @requires jQuery (tested with version 1.3.1) <http://jquery.com/>
 */

if (typeof jQuery == 'undefined') {
	if (console && console.log) { console.log('Keyboard Focus plugin could not be initialised because jQuery is not available'); }
} else { /* Start if jQuery exists */

jQuery.keyFocus = {};
jQuery.keyFocus.conf = {
	keyFocusClass : 'keyboard-focus',
	mouseFocusClass : 'mouse-focus',
	focusClass : 'focus',
	mouseTimeout  : 50
};

(function($){ /* start closure (protects variables from global scope) */
	
	$(document).ready(function(){
		$('body').trackFocus();
	});
	
	/**
	 * @see http://www.w3.org/TR/wai-aria-practices/#kbd_generalnav
	 * @param DOMNode this The container element that acts as "toolbar" for the controls.
	 * @param jQuerySelector controlSelector Individual controls to navigate between.
	 * @param Object options A set of options to override the $.AKN.defaultOptions. 
	 */
	$.fn.trackFocus = function () {
		$(this).data('last-device-used', '');
		
		$(this)
			.bind('mousedown', function(e){
				$(this).data('last-device-used', 'mouse');
				$(this).data('last-device-used-when', new Date().getTime());
			})
			.bind('keydown', function(e){
				$(this).data('last-device-used', 'keyboard');
			})
			.bind('focusin', function(e){
				// Keyboard events sometimes go undetected (if tabbing in from outside the document,
				// but mouse clicks used to focus will always be closely
				// followed by the focus event. Clearing the last-device-used
				// after a short timeout and assuming keyboard when no device is known
				// works!
					if ($(this).data('last-device-used') != 'mouse' || new Date().getTime()-50 > $(this).data('last-device-used-when')) {
						$(e.target).addClass($.keyFocus.conf.keyFocusClass);
					} else {
						$(e.target).addClass($.keyFocus.conf.mouseFocusClass);
					}
					$(e.target).addClass($.keyFocus.conf.focusClass);
			})
			.bind('focusout', function(e){
				$('.'+$.keyFocus.conf.keyFocusClass+', .'+$.keyFocus.conf.mouseFocusClass).removeClass($.keyFocus.conf.keyFocusClass+' '+$.keyFocus.conf.mouseFocusClass);
				$(e.target).removeClass($.keyFocus.conf.focusClass);
			})
		;
	};
		
	
	
})(jQuery); /* end closure */
} /* end if jQuery exists */

以上是关于javascript jquery.keyboard-focus.js的主要内容,如果未能解决你的问题,请参考以下文章

javascript JavaScript isset()等效: - JavaScript

JavaScript 使用JavaScript更改CSS(JavaScript)

JavaScript之基础-1 JavaScript(概述基础语法)

前端基础-JavaScript的基本概述和语法

JavaScript

JavaScript