项目升级感悟（键盘事件、渐变效果、title图标添加）

最新推荐文章于 2025-03-13 00:28:03 发布

原创最新推荐文章于 2025-03-13 00:28:03 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

web前端杂记专栏收录该内容

6 篇文章

订阅专栏

这段时间公司要进行前端升级，要将原先的Extjs4.2版本升到最新的Extjs6.0.1版本。于是，我查看了公司系统之前写的代码（毕竟我也才来4个月，对之前的大牛的写的代码还不熟悉）。在看前人写的代码时，我发现了有一些比较好，且比较通用的代码，现分享给大家：

1.禁止键盘按钮事件（有很多业务场景，比如“禁止输入负数”、“禁止输入小数”等等，而我们下面介绍的是"按回删键防止浏览器页面回退"，这是一个普遍存在而且非解决不可的Bug）

//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外   
    function banBackSpace(e){  
        //alert(event.keyCode)  
        var ev = e || window.event;//获取event对象     
        var obj = ev.target || ev.srcElement;//获取事件源       
        var t = obj.type || obj.getAttribute('type');//获取事件源类型       
        //获取作为判断条件的事件类型   
        var vReadOnly = obj.readOnly;  
        var vDisabled = obj.disabled;  
        //处理undefined值情况   
        vReadOnly = (vReadOnly == undefined) ? false : vReadOnly;  
        vDisabled = (vDisabled == undefined) ? true : vDisabled;  
        //当敲Backspace键时，事件源类型为密码或单行、多行文本的，    
        //并且readOnly属性为true或disabled属性为true的，则退格键失效    
        var flag1 = ev.keyCode == 8 && (t == "password" || t == "text" || t == "textarea") && (vReadOnly == true || vDisabled == true);  
        //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效      
        var flag2 = ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea";  
        //判断      
        if (true)   
            event.returnValue = false;//这里如果写 return false 无法实现效果   
    }
    //禁止后退键 作用于Firefox、Opera  
    document.onkeypress = banBackSpace;
    //禁止后退键  作用于IE、Chrome  
    document.onkeydown = banBackSpace;

2.html元素渐变效果js（当然，如果用jquery，就是一句话的事，但是我也是今天才看到原生的写法，弄懂这个逻辑感觉挺爽的）

var speed = 1;
	var timer = null;
	var alpha = 30;

	function showIt(s) {
		startrun(s, 95);
	}

	function closeIt(s) {
		startrun(s, 0);
	}

	function startrun(s, target) {
		var ss = window.document.getElementById(s);
		clearInterval(timer);
		timer = setInterval(function() {
			if (target > alpha) {
				speed = 5;
			} else {
				speed = -5;
			}

			if (alpha == target) {
				clearInterval(timer);
			} else {
				alpha = alpha + speed;
				ss.style.filter = 'alpha(opacity=' + alpha + ')';
				ss.style.opacity = alpha / 100;
			}
		}, 30)
	}

3.给Html<title>加上左侧显示的图标（这个因为之前没考虑过这个东西，很惭愧。。今天看到了这样的<link>还感觉很奇怪，百度后才发现原来是这么一个东西，涨姿势了~）

<link rel="icon" href="/favicon32.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<!--图片一般放在项目根目录-->