angularjs全局捕获扫描枪扫描事件

实现功能：无论当前光标在何处，只要启动扫描枪扫描后，立马使光标全局丢失并获取扫描值。

实现思路：

1、获取键盘输入事件，键盘输入间隔时间小于30毫秒则可以认定为扫描枪输入

2、封装angularjs 指令，嵌套该指令到全局模块中，只能引入一次

3、开始扫描时，将光标定位到指令内部的无用按钮上，立即光标丢失，解决光标在其他表单控件输入的问题。

4、扫描完成后，将扫描的值通过angularjs事件全局下发到所有子controller中

5、子controller设置当前模块的事件名，并监听该事件名

指令源码：

/**
 * 获取扫描设备的扫描事件处理
 * 
 * @author luoy
 * @date 2019/09/05
 */
ngApp.directive('angularScan', function() {
			return {
				restrict : "E",
				scope : {
					options : "="
				},
				link : function(scope, elm, attrs) {

					var options = scope.options;

					if (isUndefined(options)) {
						console.error("")
						return;
					}
					var keycode = "";
					var lastTime = null;
					var nextTime = null;
					var lastCode = null;
					var nextCode = null;
					var $btn = $('<button  id = "scanOptions"></button>');
					$(elm).append($btn);
					document.onkeydown = function(e) {
						// 兼容性处理
						if (window.event) {
							nextCode = e.keyCode
						} else if (e.which) {
							nextCode = e.which
						}
						// 获取当前时间
						nextTime = new Date().getTime();
						if (nextCode == 13 && keycode != ""
								&& nextTime - lastTime <= 30) {// 回车字符
							scope.$root.$broadcast(options.eventName, keycode);// 全局推送事件到指定的子controller
							keycode = "";
							lastCode = null;
							lastTime = null;

						} else {
							// 此处可以增加限制nextCode的种类例如数字
							if (lastCode == null && lastTime == null) {// 初始字母

								if (nextCode == 16) {
									return;
								}
								angular.element(document)
										.find("[id='scanOptions']")[0].focus();
								angular.element(document)
										.find("[id='scanOptions']")[0].blur();
								keycode = String.fromCharCode(nextCode);
							} else if (lastCode != null && lastTime != null
									&& nextTime - lastTime <= 30) {

								if (nextCode == 16) {
									return;
								}
								keycode += String.fromCharCode(nextCode);
							} else {// 手动输入
								keycode = "";
								lastCode = null;
								lastTime = null;
							}
							lastCode = nextCode;
							lastTime = nextTime;
						}
					}
				}

			}

			function isUndefined(exp) {
				if (typeof(exp) == "undefined") {
					return true;
				}
				return false;
			}

		});

 

调用步骤：

1、主模块html中引入指令（只需要全局引用一次）：<angular-scan options="scanOptions"/>

2、主模块controller代码：$rootScope.scanOptions={}

3、其他controller中监听扫描事件：

//修改当前扫描事件监听的名称（angularEvent为自定义对象）

$rootScope.scanOptions.eventName = angularEvent.JOBCOSTING_AUDIT_SCAN_EVENT;

//监听扫描

$scope.$on(angularEvent.JOBCOSTING_AUDIT_SCAN_EVENT, function(event, value) { 

    console.log(value);//打印扫描值

});