JQuery 大写输入提示

最新推荐文章于 2022-08-11 19:05:37 发布

解夕

最新推荐文章于 2022-08-11 19:05:37 发布

阅读量4.3k

点赞数 3

分类专栏： javascript 文章标签： jquery javascript 大写监听

本文链接：https://blog.csdn.net/liu942626/article/details/53956168

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

登陆界面中密码输入框输入隐藏，为了增强用户体验，出现了密码输入框提示大写锁定的需求。

经过网上搜索，发现大部分方法都是使用用原生JS实现，且未提供较好的移植性，无法较为灵活的运用到自己的项目中，因此自己使用jQuery+CSS样式实现了一个较为灵活的大写监听方法。先上链接http://download.csdn.net/detail/liu942626/9726188

1、将大写监听封装为函数，向函数传入需要监听的input的id即可进行大写监听。如<input id="test"/>则可直接使用

capitalTip('test')绑定大写监听。

<script>
$(document).ready(function(){
    $("#logininput").on('click.login',function(){
        login();
    });
    
    //密码大写输入提示
    function capitalTip(id){
        $('#' + id).after('<div class="capslock" id="capital_password"><span>大写锁定已开启</span></div>');
        var capital = false; //聚焦初始化，防止刚聚焦时点击Caps按键提示信息显隐错误
        
        // 获取大写提示的标签，并提供大写提示显示隐藏的调用接口
        var capitalTip = {
            $elem: $('#capital_'+id),
            toggle: function (s) {
                if(s === 'none'){
                    this.$elem.hide();
                }else if(s === 'block'){
                    this.$elem.show();
                }else if(this.$elem.is(':hidden')){
                    this.$elem.show();
                }else{
                    this.$elem.hide();
                   }
            }
        }
        $('#' + id).on('keydown.caps',function(e){
            if (e.keyCode === 20 && capital) { // 点击Caps大写提示显隐切换
                capitalTip.toggle();
            }
        }).on('focus.caps',function(){capital = false}).on('keypress.caps',function(e){capsLock(e)}).on('blur.caps',function(e){
            
            //输入框失去焦点，提示隐藏
            capitalTip.toggle('none');
        });
        function capsLock(e){
            var keyCode = e.keyCode || e.which;// 按键的keyCode
            var isShift = e.shiftKey || keyCode === 16 || false;// shift键是否按住
            if(keyCode === 9){
                capitalTip.toggle('none');
            }else{
              //指定位置的字符的 Unicode 编码 , 通过与shift键对于的keycode，就可以判断capslock是否开启了
              // 90 Caps Lock 打开，且没有按住shift键
              if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {
                  // 122 Caps Lock打开，且按住shift键
                  capitalTip.toggle('block'); // 大写开启时弹出提示框
                  capital = true;
              } else {
                  capitalTip.toggle('none');
                  capital = true;
              }
            }
        }
    };
    
    //调用提示
    capitalTip('password');
   
})

2、将大写提示的div的样式抽离为css样式，大家可以根据自己的需求对样式进行更改，已满足自身的需求。

<style>
.capslock{
    padding:0 2px 2px 26px;
    position:absolute;
    margin: 0 0 0 60px;
    width:130px;
    height:30px;
    line-height:30px;
    display:none;
    overflow:hidden;
    z-index:4;
    color:#124fed;
    background: url(imgs/capslock.png) no-repeat;
}
</style>

3、以下为整个登陆界面的css+js+html代码，由于本界面利用bootstracp和jQuery实现，以下代码需要引入bootstracp样式以及jQuery的js文件，有兴趣的点击下面的链接下载整个项目，项目包含所需要的样式，js文件，一个简单的登陆界面以及大写提示的背景图片.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" />

<script src="./js/jquery.min.js" type="text/javascript"></script>
<script src="./js/bootstrap.min.js" type="text/javascript"></script>
<style>
.capslock{
    padding:0 2px 2px 26px;
    position:absolute;
    margin: 0 0 0 60px;
    width:130px;
    height:30px;
    line-height:30px;
    display:none;
    overflow:hidden;
    z-index:4;
    color:#124fed;
    background: url(imgs/capslock.png) no-repeat;
}
</style>
<script>
$(document).ready(function(){
    $("#logininput").on('click.login',function(){
        login();
    });
    
    //密码大写输入提示
    function capitalTip(id){
        $('#' + id).after('<div class="capslock" id="capital_password"><span>大写锁定已开启</span></div>');
        var capital = false; //聚焦初始化，防止刚聚焦时点击Caps按键提示信息显隐错误
        
        // 获取大写提示的标签，并提供大写提示显示隐藏的调用接口
        var capitalTip = {
            $elem: $('#capital_'+id),
            toggle: function (s) {
                if(s === 'none'){
                    this.$elem.hide();
                }else if(s === 'block'){
                    this.$elem.show();
                }else if(this.$elem.is(':hidden')){
                    this.$elem.show();
                }else{
                    this.$elem.hide();
                   }
            }
        }
        $('#' + id).on('keydown.caps',function(e){
            if (e.keyCode === 20 && capital) { // 点击Caps大写提示显隐切换
                capitalTip.toggle();
            }
        }).on('focus.caps',function(){capital = false}).on('keypress.caps',function(e){capsLock(e)}).on('blur.caps',function(e){
            
            //输入框失去焦点，提示隐藏
            capitalTip.toggle('none');
        });
        function capsLock(e){
            var keyCode = e.keyCode || e.which;// 按键的keyCode
            var isShift = e.shiftKey || keyCode === 16 || false;// shift键是否按住
            if(keyCode === 9){
                capitalTip.toggle('none');
            }else{
              //指定位置的字符的 Unicode 编码 , 通过与shift键对于的keycode，就可以判断capslock是否开启了
              // 90 Caps Lock 打开，且没有按住shift键
              if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {
                  // 122 Caps Lock打开，且按住shift键
                  capitalTip.toggle('block'); // 大写开启时弹出提示框
                  capital = true;
              } else {
                  capitalTip.toggle('none');
                  capital = true;
              }
            }
        }
    };
    
    //调用提示
    capitalTip('password');
   
})
</script>
</head>
<body>
    <div class="container">
        <div class="rows">
            <div class="col-sm-4"></div>
            <div class="col-sm-4">
                <form id="loginForm" class="form-signin form-horizontal" role="form" method="get" action="" rule="rules">
                    <div class="form-group">
                            <input type="text" autofocus="autofocus" class="form-control" id="username" name="username" placeholder="账号" required=""/>
                    </div>
                    <div class="form-group">
                            <input class="form-control" id="password" name="password" οnpaste="return false" οncοntextmenu="return false" οncοpy="return false" oncut="return false" placeholder="密码" required="" type="password"/>
                    </div>
                    <div>
                        <button id="logininput" type="button" class="btn btn-login btn-long">登录</button>
                    </div>
                </form>
            </div>
            <div class="col-sm-4"></div>
        </div>
    </div>
</body>
</html>

4、登陆界面样式

最后是下载链接：http://download.csdn.net/detail/liu942626/9726188

解夕

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
JQuery 大写输入提示

登陆界面中密码输入框输入隐藏，为了增强用户体验，出现了密码输入框提示大写锁定的需求。经过网上搜索，发现大部分方法都是使用用原生JS实现，且未提供较好的移植性，无法较为灵活的运用到自己的项目中，因此自己使用jQuery+CSS样式实现了一个较为灵活的大写监听方法。先上链接http://download.csdn.net/detail/liu942626/97261881、将大写监听封
复制链接

扫一扫

专栏目录