码迷,mamicode.com
首页 > 其他好文 > 详细

小知识随手记(四)

时间:2017-07-30 00:11:30      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:ace   window   效果   keycode   页面   ++   btn   class   null   

1、JS禁止BackSpace键:

function dokey(e){
            var ev =e || window.event;//获取event对象
            var obj = ev.target || ev.srcElement;//获取事件源
            var t = obj.type || obj.getAttribute("type");//获取事件源类型
            if(ev.keyCode === 8 && t !== "password" && t !== "text" && t !== "textarea"){
                return false;
            }
        }
        document.onkeypress = dokey;//禁止后退键,作用于Firefox、Opera
        document.onkeydown = dokey;//禁止后退键,作用于IE、Chrome

  此问题有个bug就是当鼠标放在一个不可编辑的输入框上的时候,退格键依然会产生页面后退效果!所以修改一下:

function dokey(e){
        var ev =e || window.event;//获取event对象
        var obj = ev.target || ev.srcElement;//获取事件源
        var t = obj.type || obj.getAttribute("type");//获取事件源类型
        var vReadOnly = obj.readOnly;//获取作为判断条件的事件类型
        vReadOnly = (vReadOnly === undefined) ? false : vReadOnly;
        //当敲Backspace键时,事件源类型为密码或单行、多行文本的,并且readOnly属性为true则退格键失效
        var flag1 = ev.keyCode == 8 && (t=="password"||t=="text"||t=="textarea") && (vReadOnly==true);
        //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效
        var flag2 = ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea";
        if(flag1 || flag2){
            return false;
        }
    }
    document.onkeypress = dokey;//禁止后退键,作用于Firefox、Opera
    document.onkeydown = dokey;//禁止后退键,作用于IE、Chrome

  还有种情况就是disabled的时候,试验了下发现给input disabled 的时候,其类型就变成了 t == null,所以可以暂时不予考虑。

2、关于this重定向的问题:

  对于window的一些自己的方法,比如setTimeout()、setInterval()方法里面涉及到this对象时,均会需要this重定向的,这点需要注意。

<script>
window.onload=function(){
    var aBtn=document.getElementsByTagName(input);
    var that=null;//定义一个空对象用于承载this
    for(var i=0;i<aBtn.length;i++){
        aBtn[i].onclick = function(){
            that = this;//给that赋值this,this指点击的按钮button对象
            fn1();
        };
    }
    function fn1(){
        that.style.background=red;//fn1里的this指的是window对象,所以需要this重定向为button对象
    }
};
</script>
</head>
<body>
<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
</body>

3、

 

小知识随手记(四)

标签:ace   window   效果   keycode   页面   ++   btn   class   null   

原文地址:http://www.cnblogs.com/goloving/p/7257894.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!