`

js使用keyword

 
阅读更多

js 实现原理备

 

/**
 * http://www.openjs.com/scripts/events/keyboard_shortcuts/
 * Version : 2.01.B
 * By Binny V A
 * License : BSD
 */
shortcut = {
	'all_shortcuts':{},//All the shortcuts are stored in this array
	'add': function(shortcut_combination,callback,opt) {
		//Provide a set of default options
		var default_options = {
			'type':'keydown',
			'propagate':false,
			'disable_in_input':false,
			'target':document,
			'keycode':false
		}
		if(!opt) opt = default_options;
		else {
			for(var dfo in default_options) {
				if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
			}
		}

		var ele = opt.target;
		if(typeof opt.target == 'string') ele = document.getElementById(opt.target);
		var ths = this;
		shortcut_combination = shortcut_combination.toLowerCase();

		//The function to be called at keypress
		var func = function(e) {
			e = e || window.event;
			
			if(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
				var element;
				if(e.target) element=e.target;
				else if(e.srcElement) element=e.srcElement;
				if(element.nodeType==3) element=element.parentNode;

				if(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;
			}
	
			//Find Which key is pressed
			if (e.keyCode) code = e.keyCode;
			else if (e.which) code = e.which;
			var character = String.fromCharCode(code).toLowerCase();
			
			if(code == 188) character=","; //If the user presses , when the type is onkeydown
			if(code == 190) character="."; //If the user presses , when the type is onkeydown

			var keys = shortcut_combination.split("+");
			//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
			var kp = 0;
			
			//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken
			var shift_nums = {
				"`":"~",
				"1":"!",
				"2":"@",
				"3":"#",
				"4":"$",
				"5":"%",
				"6":"^",
				"7":"&",
				"8":"*",
				"9":"(",
				"0":")",
				"-":"_",
				"=":"+",
				";":":",
				"'":"\"",
				",":"<",
				".":">",
				"/":"?",
				"\\":"|"
			}
			//Special Keys - and their codes
			var special_keys = {
				'esc':27,
				'escape':27,
				'tab':9,
				'space':32,
				'return':13,
				'enter':13,
				'backspace':8,
	
				'scrolllock':145,
				'scroll_lock':145,
				'scroll':145,
				'capslock':20,
				'caps_lock':20,
				'caps':20,
				'numlock':144,
				'num_lock':144,
				'num':144,
				
				'pause':19,
				'break':19,
				
				'insert':45,
				'home':36,
				'delete':46,
				'end':35,
				
				'pageup':33,
				'page_up':33,
				'pu':33,
	
				'pagedown':34,
				'page_down':34,
				'pd':34,
	
				'left':37,
				'up':38,
				'right':39,
				'down':40,
	
				'f1':112,
				'f2':113,
				'f3':114,
				'f4':115,
				'f5':116,
				'f6':117,
				'f7':118,
				'f8':119,
				'f9':120,
				'f10':121,
				'f11':122,
				'f12':123
			}
	
			var modifiers = { 
				shift: { wanted:false, pressed:false},
				ctrl : { wanted:false, pressed:false},
				alt  : { wanted:false, pressed:false},
				meta : { wanted:false, pressed:false}	//Meta is Mac specific
			};
                        
			if(e.ctrlKey)	modifiers.ctrl.pressed = true;
			if(e.shiftKey)	modifiers.shift.pressed = true;
			if(e.altKey)	modifiers.alt.pressed = true;
			if(e.metaKey)   modifiers.meta.pressed = true;
                        
			for(var i=0; k=keys[i],i<keys.length; i++) {
				//Modifiers
				if(k == 'ctrl' || k == 'control') {
					kp++;
					modifiers.ctrl.wanted = true;

				} else if(k == 'shift') {
					kp++;
					modifiers.shift.wanted = true;

				} else if(k == 'alt') {
					kp++;
					modifiers.alt.wanted = true;
				} else if(k == 'meta') {
					kp++;
					modifiers.meta.wanted = true;
				} else if(k.length > 1) { //If it is a special key
					if(special_keys[k] == code) kp++;
					
				} else if(opt['keycode']) {
					if(opt['keycode'] == code) kp++;

				} else { //The special keys did not match
					if(character == k) kp++;
					else {
						if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase
							character = shift_nums[character]; 
							if(character == k) kp++;
						}
					}
				}
			}
			
			if(kp == keys.length && 
						modifiers.ctrl.pressed == modifiers.ctrl.wanted &&
						modifiers.shift.pressed == modifiers.shift.wanted &&
						modifiers.alt.pressed == modifiers.alt.wanted &&
						modifiers.meta.pressed == modifiers.meta.wanted) {
				callback(e);
	
				if(!opt['propagate']) { //Stop the event
					//e.cancelBubble is supported by IE - this will kill the bubbling process.
					e.cancelBubble = true;
					e.returnValue = false;
	
					//e.stopPropagation works in Firefox.
					if (e.stopPropagation) {
						e.stopPropagation();
						e.preventDefault();
					}
					return false;
				}
			}
		}
		this.all_shortcuts[shortcut_combination] = {
			'callback':func, 
			'target':ele, 
			'event': opt['type']
		};
		//Attach the function with the event
		if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
		else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
		else ele['on'+opt['type']] = func;
	},

	//Remove the shortcut - just specify the shortcut and I will remove the binding
	'remove':function(shortcut_combination) {
		shortcut_combination = shortcut_combination.toLowerCase();
		var binding = this.all_shortcuts[shortcut_combination];
		delete(this.all_shortcuts[shortcut_combination])
		if(!binding) return;
		var type = binding['event'];
		var ele = binding['target'];
		var callback = binding['callback'];

		if(ele.detachEvent) ele.detachEvent('on'+type, callback);
		else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);
		else ele['on'+type] = false;
	}
}
 
分享到:
评论

相关推荐

    JavaScript this keyword

    Study note on htis keyword in JavaScript

    keyword-color.js

    keyword-color.js

    jS 正则表达式实现关键字高亮显示

    在JavaScript(JS)中,正则表达式是一种强大的文本处理工具,可以用于匹配、查找、替换等操作。在本文中,我们将深入探讨如何利用正则表达式实现关键字的高亮显示,尤其适用于文本搜索和代码高亮场景。下面将详细...

    javascript里使用php代码实例.docx

    - 当需要在JavaScript中动态获取服务器数据时,通常使用AJAX(Asynchronous JavaScript and XML)技术。虽然名字中有XML,但现代的AJAX请求通常使用JSON格式传输数据。 - 示例中没有直接展示AJAX请求,但`$.search...

    is-keyword-js:一种检查字符串是否为 JavaScript 中的关键字或保留关键字的简单方法

    is-keyword-js 检查给定的字符串是否为 Javascript 关键字或为将来的关键字保留。 安装 $ npm install --save is-keyword-js 用法 var isKeyword = require ( 'is-keyword-js' ) ; isKeyword ( 'this' ) ; // ...

    JS过滤树数据

    本文将深入探讨如何使用JavaScript处理和过滤树形数据结构,并结合提供的`jsTest.html`文件来理解实际应用。 首先,树数据结构是由节点组成的,每个节点可能有零个或多个子节点。在JavaScript中,树数据通常表现为...

    JavaScript下拉框筛选可搜索

    - 监听事件:我们可以使用JavaScript监听用户的键盘输入,通常是`input`或`keyup`事件,以便在用户输入时实时更新筛选结果。 - 筛选逻辑:当事件触发时,我们获取当前输入的关键词,然后遍历所有`&lt;option&gt;`元素,...

    原生js 表单搜索text文本框支持手写输入法

    在IT行业中,JavaScript(简称js)是一种广泛使用的前端编程语言,尤其在网页交互和动态功能实现上发挥着关键作用。本文将深入探讨如何利用原生JavaScript实现表单搜索功能,并支持手写输入法,这对于创建具有高度...

    Leanpub.JavaScript.and.Node.FUNdamentals.May.2014

    Node.js是一个基于Chrome V8引擎的JavaScript运行时,它让开发者能够在服务器端使用JavaScript。Node.js采用事件驱动、非阻塞I/O模型,非常适合构建高性能、轻量级的服务端应用。 本书内容丰富,覆盖了JavaScript...

    JS实现页面查找Ctrl+F

    在网页开发中,JavaScript是一种非常重要的脚本语言,它允许我们与用户进行交互,处理数据,以及实现各种动态效果。"JS实现页面查找Ctrl+F"的功能是模拟浏览器内置的查找功能,即用户按下键盘上的Ctrl+F快捷键时,...

    Javascript制作站内搜索

    下面我们将深入探讨如何使用JavaScript来制作站内搜索。 一、理解站内搜索的基本原理 站内搜索的基本思想是:当用户在搜索框中输入关键词后,JavaScript会捕获这些输入,然后在页面上找到与关键词匹配的元素,并...

    js搜索提示

    在IT行业中,JavaScript(简称JS)是一种广泛应用于前端开发的脚本语言,它为网页提供了丰富的交互性。在用户输入时提供实时搜索提示是提升用户体验的重要手段,这通常涉及到Ajax技术。Ajax,即异步JavaScript和XML...

    使用JSDoc建立JavaScript代码的文档

    ### 使用JSDoc建立JavaScript代码的文档 #### JSDoc简介 JSDoc是一种用于为JavaScript代码添加注释和文档的工具,它可以帮助开发者更好地理解代码功能与结构,并且能够自动生成HTML格式的API文档。这不仅提高了代码...

    前端项目-mark.js.zip

    **描述解读:**"前端项目-mark.js,A keyword highlighter for search terms or regular expressions" 描述了 mark.js 的主要功能。这是一个用于前端的关键词高亮器,它可以突出显示搜索词或正则表达式匹配的部分,这...

    js输入关键词创建标签代码.zip

    在JavaScript(JS)编程中,创建动态标签是一种常见的需求,特别是在网页交互和用户界面设计中。"js输入关键词创建标签代码.zip" 提供了一个解决方案,它允许用户输入关键词,然后根据这些关键词自动生成对应的HTML...

    JS关键词搜索选择筛选代码.zip

    总结起来,"JS关键词搜索选择筛选代码"涵盖了以下几个主要的JavaScript知识点:事件监听、AJAX请求、数据过滤与渲染、DOM操作以及可能的UI特效。这个代码实例可以帮助开发者学习如何创建动态、交互式的搜索和筛选...

    下拉框内容太多,使用Javascript快速选择

    JavaScript是一种广泛使用的客户端脚本语言,它可以在用户的浏览器上运行,无需服务器端交互,就能实现动态交互效果。在我们的场景中,JavaScript将用于监听搜索框的输入事件,实时过滤下拉框中的选项,只显示与用户...

    Javascript实现一个简单的输入关键字添加标签效果实例

    最后,我们使用jQuery的`$(function () {...})`来确保页面加载完毕后再执行JavaScript代码,初始化`keyWord`对象并调用`init`方法。 ```javascript $(function () { var keyWord = $("#wordInput").keyWord({ ...

Global site tag (gtag.js) - Google Analytics