zoukankan      html  css  js  c++  java
  • js-PC版监听键盘大小写事件

    //获取键盘按键事件,可以使用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);
        }
  • 相关阅读:
    CS round--36
    Vijos 1002 过河 dp + 思维
    汇编模拟36选7
    1137
    E. Mike and Foam 容斥原理
    Even-odd Boxes hackerrank 分类讨论
    112. 作业之地理篇 最小费用最大流模板题
    1550: Simple String 最大流解法
    Sam's Numbers 矩阵快速幂优化dp
    java.sql.SQLSyntaxErrorException: ORA-01722: 无效数字
  • 原文地址:https://www.cnblogs.com/songbyjson/p/5016928.html
Copyright © 2011-2022 走看看