码迷,mamicode.com
首页 > Web开发 > 详细

js-PC版监听键盘大小写事件

时间:2015-12-03 18:49:52      阅读:346      评论:0      收藏:0      [点我收藏+]

标签:

//获取键盘按键事件,可以使用keyup。

//问题:获取到键盘的按下Caps lock键时,不能知道当前状态是大写、还是小写状态。

//解决:

设置一个全局判断大小写状态的 标志:isCapital = -1;  //是否大写 -1:无状态、0:小写、1:大写

  给window加一个监听键盘事件方便判断大小写状态,

  给所有的输入都加上键盘监听事件,监听大小写切换。

如何判断键盘大小写?

  首先我们不可能直接从用户按下Caps lock键而去判断用户切换大小写状态,只能从用户输入的每个字去判断。

另外注意 通过组合键按下的大小写.

a-z的keyCode 65-90

拿到keyCode不能判断其是大小写,只能再从光标的位置拿到它的值,然后用charCodeAt去转。

最后判断其是否在是大写。

 

提示我是用layer弹窗插件。

示例:

//监听大小写。。。。
    //必须全局监听
    var isCapital = -1; //是否大写 -1:无状态、0:小写、1:大写
    jQuery(window).keyup(changeCapsLock);//监听全局
    //监听某个input
    jQuery(‘input[name=loginp]‘, loginForm).on(‘keyup‘, function(e){
        var lastVal = ‘‘;
        if (e.keyCode >= 65 && e.keyCode <= 90) {
            console.log(e);
            lastVal = jQuery(this).val().substr(getCursortPosition.call(this,this)-1, 1).charCodeAt(0);
            if ( lastVal == e.keyCode) {
                e.shiftKey ? ‘‘ : isCapital = 1;
                tipsCapsLock.call(this);
            }else{
                e.shiftKey ? ‘‘ : isCapital = 0;
                layer.closeAll(‘tips‘);
            }
        }else{
            changeCapsLock.call(this, e);
        }
    });
    //是否切换大小写
    function changeCapsLock(e){
        e.stopPropagation();
        if (e.keyCode !== 20) {return;}
        switch(isCapital){
            case -1:
                break;
            case 0:
                isCapital = 1;
                tipsCapsLock.call(this,this);
                if (this !== window) tipsCapsLock.call(this);
                break;
            case 1:
                if (this !== window) layer.closeAll(‘tips‘);
                isCapital = 0;
                break;
        }
    }

    //提示大小写
    function tipsCapsLock(){
        layer.tips(‘大写锁定已打开,可能会使您输入错误的密码。‘, this);
    }
    //得到当前输入光标的位置
    function getCursortPosition (ctrl) {
        var CaretPos = 0;   // IE Support
        if (document.selection) {
            ctrl.focus ();
            var Sel = document.selection.createRange ();
            Sel.moveStart (‘character‘, -ctrl.value.length);
            CaretPos = Sel.text.length;
        }
        // Firefox support
        else if (ctrl.selectionStart || ctrl.selectionStart == ‘0‘)
            CaretPos = ctrl.selectionStart;
        return (CaretPos);
    }

 

js-PC版监听键盘大小写事件

标签:

原文地址:http://www.cnblogs.com/songbyjson/p/5016928.html

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