//获取键盘按键事件,可以使用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版监听键盘大小写事件的更多相关文章

  1. js及vue监听键盘回车事件

    js document.onkeydown = (event) => { var e = event || window.event; if(e && e.keyCode==13 ...

  2. Pygame制作微信打飞机游戏PC版

    使用Pygame制作微信打飞机游戏PC版 转至:http://www.cnblogs.com/dukeleo/p/3339780.html   前一阵子看了一篇文章:青少年如何使用Python开始游戏 ...

  3. 使用Pygame制作微信打飞机游戏PC版

    前一阵子看了一篇文章:青少年如何使用Python开始游戏开发 .看完照葫芦画瓢写了一个,觉得挺好玩儿,相当于简单学了下Pygame库.这篇文章是个12岁小孩儿写的,国外小孩儿真心NB,想我12岁的时候 ...

  4. 仿PC版微信的练手项目(可实时通讯)

    仿PC版微信的DEMO 本项目是由一个仿PC版微信的vue前端项目,和一个使用leancloud进行数据存储的.提供WebSocket的node后端项目构成. 本项目使用的技术栈:vue + vue- ...

  5. 让PC版网站在移动端原样式显示

    一般PC网站在移动端显示效果往往和PC版原样式不同,为了在移动端下还原原PC站样式,可以采用以下方式解决: 1) 去掉页头的: <meta name="viewport" c ...

  6. 关于js的addEventListener 和一些常用事件

    element.addEventListener(<event-name>, <callback>, <use-capture>);document.addEven ...

  7. LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖!

    LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖! github:http://dtdxrk.github.io/LM-ReadImgMode/ TXT 1.全新的2.0版本,脱离 ...

  8. 基于 HTML + WebGL 结合 23D 的疫情地图实时大屏 PC 版

    前言 2019年12月以来,湖北省武汉市陆续发现了多例肺炎病例,现已证实为一种新型冠状病毒感染引起的急性呼吸道传染病并蔓延全国,肺炎疫情牵动人心,人们每天起来第一件事变成了关注疫情进展,期望这场天灾早 ...

  9. 基于 HTML + WebGL 结合 23D 的疫情地图实时大屏 PC 版【转载】

    前言 2019年12月以来,湖北省武汉市陆续发现了多例肺炎病例,现已证实为一种新型冠状病毒感染引起的急性呼吸道传染病并蔓延全国,肺炎疫情牵动人心,人们每天起来第一件事变成了关注疫情进展,期望这场天灾早 ...

随机推荐

  1. latex使用问题总结1

    文献引用问题 若使用了\usepackage[super, square, number, sort&compress]{natbib},\cite的文献并不与文本平行,反而位于右上角 文献引 ...

  2. z-index 可以使用负值,CSS相对定位、绝对定位利器

    很多技巧都是在工作中测试出来的,我搞DIV+CSS前端开发,现在是安卓收藏家,日常也有很多技巧,刚刚突然发现的这个技巧,真的很实用:Z-index值可以使用负值. z-index是个很强大的属性,是个 ...

  3. 纯js开发防win7日历控件

    不久前项目开发中遇到需要用js实现选择日期的需求,百度了下,确实一大把一大把的,但多少还是有些不符合当前需求,遂down了一份最接近的,然后修修改改,基本符合了... 先上几张效果图~~~ 需要输入时 ...

  4. shared_ptr:资源管理利器

    如果你还在使用传统的C++,那么可以肯定堆内存的管理让你头痛过!在传统的C++领域,堆内存管理上我们能借用的现成工具就只有auto_ptr.但是很不幸用auto_ptr管理堆内存简直就是个错误.aut ...

  5. 简单的ATM,见笑见笑

    #include<stdio.h>#include<string.h> void main(){  char a[4]={0}; char e[]="9527&quo ...

  6. GoldenGate针对OEM 13.1的版本发布

    OGG 针对OEM(Oracle Enterprise Manager) 13.1的插件已经可以从这里下载: http://www.oracle.com/technetwork/middleware/ ...

  7. php 画图片3

    <?php // 中文验证码 // 1. 创建画布 $im = imagecreatetruecolor(200, 200); // 2. 创建背景色 // 2.1得到背景颜色 $bg_colo ...

  8. Duilib开发环境搭建

    1.到github上下载最新版本,https://github.com/duilib/duilib,也没有发现版本号,就如图所示吧 2.我只安装了VS2008,而github上的已经更新到VS2013 ...

  9. ios--进程/多线程/同步任务/异步任务/串行队列/并行队列(对比分析)

    现在先说两个基本的概念,啥是进程,啥是线程,啥又是多线程;先把这两个总是给弄清再讲下面的 进程:正在进行的程序,我们就叫它进程. 线程:线程就是进程中的一个独立的执行路径.这句话怎么理解呢! 一个程序 ...

  10. xlwt写入中文操作不成功,提示UnicodeDecodeError: ascii codec can't decode byte ...

    打开xlwt包里的Workbook.py文件,修改Workbook类的__init__方法 将 def __init__(self, encoding='ascii', style_compressi ...