项目升级感悟(键盘事件、渐变效果、title图标添加)
2015-11-26 17:37
375 查看
这段时间公司要进行前端升级,要将原先的Extjs4.2版本升到最新的Extjs6.0.1版本。于是,我查看了公司系统之前写的代码(毕竟我也才来4个月,对之前的大牛的写的代码还不熟悉)。在看前人写的代码时,我发现了有一些比较好,且比较通用的代码,现分享给大家:
1.禁止键盘按钮事件(有很多业务场景,比如“禁止输入负数”、“禁止输入小数”等等,而我们下面介绍的是"按回删键防止浏览器页面回退",这是一个普遍存在而且非解决不可的Bug)
2.html元素渐变效果js(当然,如果用jquery,就是一句话的事,但是我也是今天才看到原生的写法,弄懂这个逻辑感觉挺爽的)
3.给Html<title>加上左侧显示的图标(这个因为之前没考虑过这个东西,很惭愧。。今天看到了这样的<link>还感觉很奇怪,百度后才发现原来是这么一个东西,涨姿势了~)
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" /> <!--图片一般放在项目根目录-->
相关文章推荐
- android: 增加 addDataScheme("file") 才能收到SD卡插拔事件的原因分析 -- 浅析android事件过滤策略
- QT学习 之 三维饼图绘制
- 邮箱发送搭建注意
- Keil uVision(MDK)软件使用
- Restrictions用法
- vs2013 MFC Socket UDP 简单聊天工具
- 状态枚举类设计
- 介绍Web 2.0 编程思想:16条法则
- java笔记-初识类与对象
- GitLab安装手记
- QPPc 工程更新,与QPPs通信
- 取读浮点数
- MYSQL命令大全
- 转:Source Insight中多行注释
- 设计模式之二 工厂方法模式 Factory Method
- 潜在语义分析
- AndroidStudio快捷键Search/Replace
- 找到一个新的超好用的U盘启动制作工具了
- linux下提示command not found
- as(android studio)的初次使用