整理一下嵌入式WEB开发中的各种屏蔽
http://imochen.com/tidy-up-the-embedded-web-development-in-a-variety-of-shielding.html
每次做客户端WEB页,总会遇到QA提出的BUG,“F5没屏、右键菜单没屏、怎么还能选中呢、我去。你屏蔽了选择、这input里面的内容也不能选了,这不科学。你看,你看,我可以把这个图片托到桌面”。可能,以后,再也听不到这种声音了。。。不是QA挂了,是我有对策了,哈哈。
在嵌入式WEB中,要高仿原生的效果,所以,网页上的这些热键就显得不那么和谐了。还好,有js,我们可以轻松的干掉这些不想要的东西。但是即使这样,还是会有这样那样的问题,那我们就一起来看一下,怎么搞
一般我们想到的就是F5,Ctrl + F5,为了保险起见,我们把Ctrl + R也加上,不知道大家有没有遇到这种情况。Ctrl + N的时候在IE下就重新开了一个浏览器打开了当前页面。这个虽然不是刷新,但是也归类到这里里面。顺手把这个干掉,代码如下,keyCode大家可以对应一下。反正我也记不住,每次都打出来看看。
var event = e || window.event;
var k = event.keyCode;
if((event.ctrlKey == true && k == 82) || (event.ctrlKey == true && k == 78) || (k == 116) || (event.ctrlKey == true && k == 116))
{
event.keyCode = 0;
event.returnValue = false;
event.cancelBubble = true;
return false;
}
就目前遇到的,右键分为flash上的和页面上的。其实这个我没做测试。我个人猜测,flash不在文档流的时候,右键是独立的。不过,一般做嵌入式的时候,都会把flash处理一下,所以这个问题不大。右键屏蔽就比较简单了。
document.oncontextmenu = function(){
return false;
};
同样简单的还有拖拽,就不解释了。开始拖拽的时候return false就可以了
document.ondragstart = function(){
return false;
};
不允许用户用鼠标来选中内容,但是如果是在input或者是textarea上的时候,是可以选择的,
document.onselectstart = function( e ){
//屏蔽选择,textarea 和 input 除外
var event = e || window.event;
var tagName = ‘‘;
try{
tagName = (event.target || event.srcElement).tagName.toLowerCase();
}
catch(e){}
if( tagName != ‘textarea‘ && tagName != ‘input‘){
return false;
}
}
document.onclick = function( e ){
//屏蔽 Shift + click Ctrl + click
var event = e || window.event;
var tagName = ‘‘;
try{
tagName = (event.target || event.srcElement).tagName.toLowerCase();
}
catch(e){}
if( (event.shiftKey || event.ctrlKey) && tagName == ‘a‘ ){
event.keyCode = 0;
event.returnValue = false;
event.cancelBubble = true;
return false;
}
}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。