虚拟键盘功能js

最新推荐文章于 2025-07-10 16:46:54 发布

nzstjhk

最新推荐文章于 2025-07-10 16:46:54 发布

阅读量4.3k

点赞数 2

分类专栏：小功能总结文章标签：虚拟键盘 js 输入框

小功能总结专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个基于HTML、CSS和JavaScript实现的虚拟键盘项目。该键盘可以模拟真实键盘的功能，包括字母输入、符号切换、大小写转换等，并通过简单的用户交互实现文本输入。代码详细展示了如何构建一个完全自定义的键盘布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>pagination-nick</title>
    <link rel="stylesheet" href="css/key.css">
</head>
<body>
    <div class="key_plug">
        <div class="small_key"> 
            <input type="text" class="keyboard" autofocus="" placeholder="账号">
             <span id="key_icon"></span>
        </div>
        <div class="keys">
            <ul class="key-contianer" id="container">
                <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
                <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
                <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
                <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
                <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
                <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
                <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
                <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
                <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
                <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
                <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
                <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
                <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
                <li class="delete lastitem">delete</li>
                <li class="tab">tab</li>
                <li class="letter">q</li>
                <li class="letter">w</li>
                <li class="letter">e</li>
                <li class="letter">r</li>
                <li class="letter">t</li>
                <li class="letter">y</li>
                <li class="letter">u</li>
                <li class="letter">i</li>
                <li class="letter">o</li>
                <li class="letter">p</li>
                <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
                <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
                <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
                <li class="capslock">caps lock</li>
                <li class="letter">a</li>
                <li class="letter">s</li>
                <li class="letter">d</li>
                <li class="letter">f</li>
                <li class="letter">g</li>
                <li class="letter">h</li>
                <li class="letter">j</li>
                <li class="letter">k</li>
                <li class="letter">l</li>
                <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
                <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
                <li class="return lastitem">return</li>
                <li class="left-shift">shift</li>
                <li class="letter">z</li>
                <li class="letter">x</li>
                <li class="letter">c</li>
                <li class="letter">v</li>
                <li class="letter">b</li>
                <li class="letter">n</li>
                <li class="letter">m</li>
                <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
                <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
                <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
                <li class="right-shift lastitem">shift</li>
                <li class="space lastitem">&nbsp;</li>
            </ul>
        </div>
    </div>

    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="js/key.js"></script>
    <script>
        
    </script>
</body>
</html>

css代码

/* 键盘距离 */
.key_plug{
    margin-top:50px;
}
/* 隐藏 */
.temp_hidden{
    display: none;
}
/* 容器大小随意 居中处理*/
.key_plug .small_key{
    width:200px;
    height:100px;
    margin:0 auto;
}
/* 小键盘图标 */
.key_plug .small_key span{
    display: inline-block;
    width:20px;
    height:20px;
    background: url(../img/key.png) no-repeat;
}
/* 键盘外容器设定 */
.keys{
    margin: 0 auto;
    width: 700px;
    border-radius:3%;
    box-shadow: 0 0 3px rgba(0,0,0,0.9);
}
.key-contianer{
margin: 0;
padding: 0;
list-style: none;
height:235px;
width:722px;
padding:10px;
border-radius:3%;
}
/* 键盘设定样式 */
.key-contianer li {
float: left;
margin: 0 5px 5px 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #fff;
border: 1px solid #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0,0,0,0.9);
}
.capslock, .tab, .left-shift {
clear: left;
}
.key-contianer .tab, #keyboard .delete {
width: 70px;
}
.key-contianer .capslock {
width: 80px;
}
.key-contianer .return {
width: 77px;
}
.key-contianer .left-shift {
width: 95px;
}
.key-contianer .right-shift {
width: 107px;
}
.lastitem {
margin-right: 0;
}
.uppercase {
text-transform: uppercase;
}
.key-contianer .space {
clear: left;
width: 678px;
}
.key-contianer .delete{
    width: 70px;
}
.on {
display: none;
}
.key-contianer li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}

js代码

;(function($){
    var indexCtrl = function(){
        var shift = false;
        var capslock = false;
        //找到input文本框
        var keyUpdate= function(){
            $write=$(this);
        }
        //点击key小图标虚拟键盘进行隐藏或显示
        var keyToggle= function(){
            if ($('.keys').hasClass('temp_hidden')) {
                $('.keys').removeClass('temp_hidden');
            } else {
                $('.keys').addClass('temp_hidden');
            }
        }
        //点击键盘按键的处理
        var keyOperate = function(){
            var $this = $(this);
            character = $this.html(); 
            // 点击Shift键进行大小写的处理
            if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
                $('.letter').toggleClass('uppercase');
                $('.symbol span').toggle();
                shift = (shift === true) ? false : true;
                capslock = false;
                return false;
            }
            // 点击Caps键进行大写锁定和解除大写锁定的处理
            if ($this.hasClass('capslock')) {
                $('.letter').toggleClass('uppercase');
                capslock = true;
                return false;
            }
            // 点击Delete键进行删除处理
            if ($this.hasClass('delete')) {
                var html = $write.val();
                $write.val(html.substr(0, html.length - 1));
                return false;
            }
            // 特殊键的处理
            if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
            if ($this.hasClass('space')) character = ' ';
            if ($this.hasClass('tab')) character = "\t";
            if ($this.hasClass('return')) character = "\n";
            // Uppercase letter
            if ($this.hasClass('uppercase')) character = character.toUpperCase();
            // Remove shift once a key is clicked.
            if (shift === true) {
                $('.symbol span').toggle();
                if (capslock === false) $('.letter').toggleClass('uppercase');
                shift = false;
            }
            // 点击后的字符拼接
            $write.val($write.val()+character);
    }
    var loadEvent= function(){
        $('.keyboard').bind("click",keyUpdate);
        $("#key_icon").bind("click",keyToggle);
        $("#container li").bind("click",keyOperate);
    }
        return{
            init:function(){
             loadEvent();
            }
        }
    }();
    indexCtrl.init();
})(jQuery);

效果：