JQuery 大写输入提示

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

解夕

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

阅读量4.4k

点赞数 3

CC 4.0 BY-SA版权

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

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

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

经过网上搜索，发现大部分方法都是使用用原生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大写提示显隐切换
                capi

最低0.47元/天解锁文章