JQuery 大写输入提示

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

经过网上搜索,发现大部分方法都是使用用原生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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值