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);
}
js-PC版监听键盘大小写事件的更多相关文章
- js及vue监听键盘回车事件
js document.onkeydown = (event) => { var e = event || window.event; if(e && e.keyCode==13 ...
- Pygame制作微信打飞机游戏PC版
使用Pygame制作微信打飞机游戏PC版 转至:http://www.cnblogs.com/dukeleo/p/3339780.html 前一阵子看了一篇文章:青少年如何使用Python开始游戏 ...
- 使用Pygame制作微信打飞机游戏PC版
前一阵子看了一篇文章:青少年如何使用Python开始游戏开发 .看完照葫芦画瓢写了一个,觉得挺好玩儿,相当于简单学了下Pygame库.这篇文章是个12岁小孩儿写的,国外小孩儿真心NB,想我12岁的时候 ...
- 仿PC版微信的练手项目(可实时通讯)
仿PC版微信的DEMO 本项目是由一个仿PC版微信的vue前端项目,和一个使用leancloud进行数据存储的.提供WebSocket的node后端项目构成. 本项目使用的技术栈:vue + vue- ...
- 让PC版网站在移动端原样式显示
一般PC网站在移动端显示效果往往和PC版原样式不同,为了在移动端下还原原PC站样式,可以采用以下方式解决: 1) 去掉页头的: <meta name="viewport" c ...
- 关于js的addEventListener 和一些常用事件
element.addEventListener(<event-name>, <callback>, <use-capture>);document.addEven ...
- LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖!
LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖! github:http://dtdxrk.github.io/LM-ReadImgMode/ TXT 1.全新的2.0版本,脱离 ...
- 基于 HTML + WebGL 结合 23D 的疫情地图实时大屏 PC 版
前言 2019年12月以来,湖北省武汉市陆续发现了多例肺炎病例,现已证实为一种新型冠状病毒感染引起的急性呼吸道传染病并蔓延全国,肺炎疫情牵动人心,人们每天起来第一件事变成了关注疫情进展,期望这场天灾早 ...
- 基于 HTML + WebGL 结合 23D 的疫情地图实时大屏 PC 版【转载】
前言 2019年12月以来,湖北省武汉市陆续发现了多例肺炎病例,现已证实为一种新型冠状病毒感染引起的急性呼吸道传染病并蔓延全国,肺炎疫情牵动人心,人们每天起来第一件事变成了关注疫情进展,期望这场天灾早 ...
随机推荐
- wp8开发笔记之应用程序真机发布调试
写在前面的话: 相信很多和我一样关注wp8动态以及已经开发了一些wp8应用程序的朋友们都遇到过这样的问题,写的程序在模拟器上进行调试总是显的没什么说服力,想拿真机进行实际测试, 该怎么办才好呢? 进行 ...
- spring boot 跨域访问处理
问题场景:由于项目中使用到跨域访问,今天也得到高人指点,所以写出来分享给大家.可能是考虑到前后端分离,前端后端服务器不在一台机器上,出现这种跨域访问的情况.正常情况下本地访问是没有问题,但是遇到这种非 ...
- Python的平凡之路(20)
(提问复习为主) 一.Django请求的生命周期 武彦涛: 路由系统 -> 视图函数(获取模板+数据=>渲染) -> 字符串返回给用户 二.路由 ...
- [转]iOS7中UITextView contentsize改变时机
在iOS7以下版本中,对UITextView设置了text属性,则contentsize就会变化,从而可以根据contentsize的变化来改变UITextView高度来做出TextView高度随着输 ...
- 关于ios “<null>”的异常处理
在iOS开发过程中经常需要与服务器进行数据通讯,但是在数据接通过程中会出现:null "<null>"等问题导致莫名其妙的崩溃. 相信你一定会写各种判断来处理这些异常, ...
- bootstrap的下载
http://files.cnblogs.com/files/eeroom/bootstrap3.3.zip http://files.cnblogs.com/files/eeroom/Bootstr ...
- C语言程序设计第十一次作业
同学们,一晃一个学期就过去了,第一节课时,我曾做过一个调查,没有一个同学在中学阶段接触过程序设计,也就是说,那时,大家都是零基础,或许只是听说过"C语言"这个词,但其他便一无所知了 ...
- cocos2d-x图层相关 锚点
CCLayerColor* ccc = CCLayerColor::create(ccc4(255,0,0,255)); ccc->setContentSize(CCSize(200,200)) ...
- visualssh 是一个可视化的ssh客户端
这两个周末写了visualssh,一个可视化的ssh客户端.里面集成了putty的功能,通过ssh协议与Linux server通讯. 以后可以针对不同的应用编写相关插件,便于管理Linux服务器上的 ...
- java 接口
1.接口的引出:发现没有继承关系的类也能共享行为 2.接口不是类,类描述对象的属性和行为,但是接口只关注实现的行为3.当我们发现有行为在多个没有继承关系的类中共享,我们要把它抽取到接口中,而不是写到父 ...