如何使用 angular.js 检测大写锁定是否打开/关闭答案

【问题标题】：How to detect while caps lock is on/off using angular.js如何使用 angular.js 检测大写锁定是否打开/关闭
【发布时间】：2015-10-30 07:17:56
【问题描述】：

我需要一个帮助。我有一个密码验证，它只接受特殊字符。在输入密码时，如果用户输入任何大写字母，将显示大写锁定通知，何时关闭消息也显示。请在下面检查我现有的代码。

<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<div ng-class="{ 'has-error': billdata.pass.$touched && billdata.pass.$invalid }">
<input type="{{inputType}}" name="pass" id="contactno" class="form-control" placeholder="password" ng-model="password" ng-minlength="8" ng-pattern="/^(?=.*[A-Z])(?=.*\d)(?=.*[a-z]).*_.*/" >
</div>
</div>
<div class="help-block" ng-messages="billdata.pass.$error" ng-if="billdata.pass.$touched">
<p ng-message="minlength" style="color:#F00;">This field is too short.The min length of your password should be 8.</p>
<p ng-message="pattern" style="color:#F00;">This field needs the special character like at least one number,upper case,lower case letter and underscore.</p>

</div>

请帮我解决这个问题。

【问题讨论】：

标签： javascript angularjs capslock

【解决方案1】：

支持大写锁定的简单库。

使用 CapsLock.js

可以使用 isOn 函数确定大写锁定键的当前状态，如果大写锁定当前显示为打开则返回 true，如果显示为关闭则返回 false：

// check the state of the caps lock key
if (CapsLock.isOn()){

  // caps lock is on

}

http://code.stephenmorley.org/javascript/detecting-the-caps-lock-key/

【讨论】：

【解决方案2】：

这可以使用ngCapsLock 模块来完成

包含相关的 js 并指定 ngCapsLock 作为依赖项：

angular.module('myApp', ['ngCapsLock']);

然后

<p class="caps-lock-alert" ng-show='isCapsLockOn'>Caps lock is on</p>

ngCapsLock

【讨论】：

我正在使用，但没有消息。
您确定已正确包含文件并指定了依赖项吗？
我没有贴出总代码。让我来创建plunkr。
您可以查看this plunkr link。

【解决方案3】：

对于 angularJS 开发人员，这是一个检查按钮是否被激活的工作示例：

在你的 JS 文件上：

  $scope.checkCase = function(event) {
        var isOn = event.originalEvent.getModifierState('CapsLock');
        if (isOn) {
            console.log('ON');
        }
    };

HTML：将其添加到您的 INPUT 中：

 ng-keyup="checkCase($event)"

【讨论】：