js--事件

Posted 我不想平庸

tags:

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

 

键盘事件

 

 

 

 

鼠标/键盘属性

altKey       返回当事件触发时,【ALT】是否被按下

ctrlKey      返回当事件触发时,【CTRL】是否被按下

shiftKey    返回当事件触发时,【SHIFT】是否被按下

 

 

 

常见的键码

 

 

练兵场1:利用键盘事件来检测密码的强度

要求:

1、密码长度在6到15之间,不允许输入空格;

2、如果密码长度在6一下,均显示弱;

3、如果密码长度大于6,如果只含有小写,大写,数字,特殊字符中的任意一种,显示弱,如果含其中任意两种显示一半,如果含有其中任意两种以上显示强

 

Array.prototype.in_array = function(element){
    if(this.indexOf && typeof(this.indexOf) == ‘function‘){
        var index = this.indexOf(element);
        if(index >= 0){
            return true;
        }else{
            return false;
        }
    }else{
        for(var i = 0,length = this.length; i < length; i++){
            if(element === this[i]){
                return true;
            }
        }
        return false;
    }
}


var obj = document.getElementById("username");

//校验密码强度
var type = [];
var strong = 0;
username.onkeypress = function(event){
	event = event ? event : ((window.event) ? window.event : "");
	var key = event.keyCode || event.which  ||  event.charCode;
	
	if(key == 32){
		return false;
	}else{
		window.strong = checkPwdStrong(username,key);
		console.log(window.strong);
		console.log(window.type);
	}
}

function checkPwdStrong(obj,key){
	var strong = null;
	switch(key){
		case 48:
		case 49:
		case 50:
		case 51:
		case 52:
		case 53:
		case 54:
		case 55:
			if(!type.in_array(‘num‘)){
				type[type.length] = ‘num‘;
			}
			break;
		case 65:
		case 66:
		case 67:
		case 68:
		case 69:
		case 70:
		case 71:
		case 72:
		case 73:
		case 74:
		case 75:
		case 76:
		case 77:
		case 78:
		case 79:
		case 80:
		case 81:
		case 82:
		case 83:
		case 84:
		case 85:
		case 86:
		case 87:
		case 88:
		case 89:
		case 90:
			if(!type.in_array(‘upper‘)){
				type[type.length] = ‘upper‘;
			}
			break;
		
		case 97:
		case 98:
		case 99:
		case 100:
		case 101:
		case 102:
		case 103:
		case 104:
		case 105:
		case 106:
		case 107:
		case 108:
		case 109:
		case 110:
		case 111:
		case 112:
		case 113:
		case 114:
		case 115:
		case 116:
		case 117:
		case 118:
		case 119:
		case 120:
		case 121:
		case 122:
			if(!type.in_array(‘lower‘)){
				type[type.length] = ‘lower‘;
			}
			break;
		case 33:
		case 34:
		case 35:
		case 36:
		case 37:
		case 38:
		case 39:
		case 40:
		case 41:
		case 42:
		case 43:
		case 44:
		case 45:
		case 46:
		case 47:
		case 58:
		case 59:
		case 60:
		case 61:
		case 62:
		case 63:
		case 91:
		case 92:
		case 93:
		case 94:
		case 95:
		case 96:
		case 123:
		case 124:
		case 125:
		case 126:
			if(!type.in_array(‘special‘)){
				type[type.length] = ‘special‘;
			}
			break;
	}
	
	
	if(obj.value.length>=5){
		switch(type.length){
			case 1:
				strong = 1;
				break;
			case 2:
				strong = 2;
				break;
			case 3:
				strong = 2;
				break;
			case 4:
				strong = 3;
				break;
		}
	}else{
		strong = 1;
	}
	return strong;
}

 

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

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

原生js禁止页面滚动

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程