转载地址：http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html

在用户登录输入密码时，常常会有因为大写锁定开启而造成输入密码错误的情况，如果在用户大写锁定开启时给予提示，就可以尽量避免这种情况的发生。

一下是代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>检测大写锁定键</title>
  6. <style type="text/css">
  7. <!--
  8. *{margin:0;padding:0;}
  9. body{padding:2em;background:#242424;color:#ccc;}
  10. h1{text-align:center;line-height:200%;}
  11. h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;}
  12. h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;}
  13. h3 a:hover{color:#fff;}
  14. p{margin:5em;}
  15. span{margin:0 0.5em;font-size:85.7%;}
  16. -->
  17. </style>
  18. </head> 
  19.  
  20. <body>
  21. <h1>检测大写锁定键&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
  22. <form action="#" method="post">
  23. <p><label for="password">密码：</label><input type="password" id="password" name="password" /><span style="display:none;">大写锁定键被按下，请注意大小写</span></p>
  24. </form>
  25. <script type="text/javascript">
  26. //<![CDATA[
  27. function  detectCapsLock(event){
  28.     var e = event||window.event;
  29.     var o = e.target||e.srcElement;
  30.     var oTip = o.nextSibling;
  31.     var keyCode  =  e.keyCode||e.which; // 按键的keyCode 
  32.     var isShift  =  e.shiftKey ||(keyCode  ==   16 ) || false ; // shift键是否按住
  33.      if (
  34.      ((keyCode >=   65   &&  keyCode  <=   90 )  &&   !isShift) // Caps Lock 打开，且没有按住shift键 
  35.      || ((keyCode >=   97   &&  keyCode  <=   122 )  &&  isShift)// Caps Lock 打开，且按住shift键
  36.      ){oTip.style.display = '';}
  37.      else{oTip.style.display  =  'none';} 
  38. }
  39. document.getElementById('password').onkeypress = detectCapsLock;
  40. //]]>
  41. </script> 
  42. </body> 
  43. </html>

js实现判断大写锁定是否开启（转）的更多相关文章

  1. js实现密码输入框对开启键盘大写锁定的提示(IE浏览器下有自动识别提示则不执行(用IE自带效果即可))

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  2. jquery插件--在input下输入密码时提示大写锁定键

    //密码大写输入提示 function capitalTip(id){ $('#' + id).after('<div class="capslock" id="c ...

  3. js中判断对象具体类型

    大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2" ...

  4. JS代码判断IE6,IE7,IE8,IE9！

    JS代码判断IE6,IE7,IE8,IE9!2011年12月15日 星期四 14:01做网页有时候会用到JS检测IE的版本,下面是检测Microsoft Internet Explorer版本的三种代 ...

  5. JS中判断鼠标按键的问题

    JS中判断鼠标按键的问题.IE左键是 window.event.button = 1右键是 window.event.button = 2中键是 window.event.button = 4没有按键 ...

  6. ----------jqery和js如何判断checkbox是否选中 --------两个单选按钮如何选一个，且用jquery获取被选的值

    jqery和js如何判断checkbox是否选中 jquery: <div id="divId" class="divTable"> <div ...

  7. js/jQuery判断浏览器名称、内核版本、浏览器壳

    1.js方法 /* 判断浏览器名称和版本 目前只能判断:ie/firefox/chrome/opera/safari 2012年5月16日23:47:08 浏览器内核UA:UA; 浏览器内核名称:NV ...

  8. JS/React 判断对象是否为空对象

    JS一般判断对象是否为空,我们可以采用: if(!x)的方式直接判断,但是如果是一个空对象,比如空的JSON对象,是这样的:{},简单的判断是不成功的,因为它已经占用着内存了,如果是JQuery的话, ...

  9. 通过JS语句判断WEB网站的访问端是电脑还是手机

    通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...

随机推荐

  1. MySQL主从复制中常见的3个错误及填坑方案

    一.问题描述 主从复制错误一直是MySQL DBA一直填不完的坑,如鲠在喉,也有人说mysql主从复制不稳定云云,其实MySQL复制比我们想象中要坚强得多,而绝大部分DBA却认为只要跳过错误继续复制就 ...

  2. Eclipse+Maven创建webapp项目<一>（转）

    还在为jar下载而烦恼吗?还在为jar依赖关系而烦恼吗?还在为jar冲突而烦恼吗?强大的maven项目管理工具来拯救你们呢?自动下载jar,自动下载jar依赖包.你什么都不用做,只需要在中央仓库中co ...

  3. mysql5.7.10 的源码安装

    mysql 5.7.10的源码安装:http://fyduan.blog.51cto.com/4234935/1729873cmake . -DCMAKE_INSTALL_PREFIX=/usr/lo ...

  4. Oracle 11g导出空表、少表的解决办法

    ORACLE 11G中有个新特性,当表无数据时,不分配segment,以节省空间. 解决方法: 1)insert一行,再rollback就产生segment了 该方法是在在空表中插入数据,再删除,则产 ...

  5. miRNA特点

    ### miRNA特点 (1)广泛存在于真核生物中, 是一组不编码蛋白质的短序列RNA,它本身不具有开放阅读框架(ORF),并且由不同于mRNA的独立转录单位表达. (2)通常的长度为20-24 nt ...

  6. 数据结构图文解析之：哈夫曼树与哈夫曼编码详解及C++模板实现

    0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...

  7. 深夜重温JavaScript中的对象和数组

    这一块实际上已经学过了,因为没有学好,在工作过程中遇到一些对象或者数组的操作,会去百度查找,浪费了许多宝贵的时间,所以特地再拐过头来重新学习. 对象 基本概念: 对象这种基本的数据结构还有其他很多种叫 ...

  8. BZOJ 4569 萌萌哒

    题目传送门 4569: [Scoi2016]萌萌哒 Time Limit: 10 Sec Memory Limit: 256 MB Submit: 483 Solved: 221 [Submit][S ...

  9. 发起post、get请求

    HttpURLConnection对象 /*** * 发起post请求,传输xml数据 * @param strUrl 请求地址 * @param xml 发送数据 * @return string ...

  10. 深入理解Java中的final关键字

    Java中的final关键字非常重要,它可以应用于类.方法以及变量.这篇文章中我将带你看看什么是final关键字?将变量,方法和类声明为final代表了什么?使用final的好处是什么?最后也有一些使 ...