网页键盘Demo

最新推荐文章于 2021-06-01 07:40:23 发布

Keybo-X

最新推荐文章于 2021-06-01 07:40:23 发布

阅读量791

点赞数 2

分类专栏： web 文章标签： JS HTML

本文链接：https://blog.csdn.net/Orehs/article/details/79150650

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页键盘Demo</title>
    <script src="https://cdn.bootcss.com/jquery/1.3.2/jquery.js"></script>
    <style type="text/css">
        .keyboard{padding: 30px 30px;height: 290px;min-width:1200px;}
        .keyboard input{display: block;width:1010px;padding:0 20px;background: #ffffff;color: #c1c1c1;font-size: 35px;font-family: '黑体';outline: none;border:none;}
        .keyboard table{width: 100%;font-family:Microsoft YaHei;background-color: #e9e9e9;border: 1px solid #dadada;border-radius:10px;}
        .keyboard table td{cursor: pointer;font-family:Arial;background: #ffffff;font-size: 35px;line-height:58px;border:1px solid #dadada;color: #c1c1c1;text-align: center;width: 108px;border-radius:10px;}
        .keyboard table td:active{opacity: 0.7;}
    </style>
</head>

<body>
<div class="keyboard clearfix" id="keyboard">
    <table cellpadding="0" cellspacing="10px">
        <tr>
            <td colspan="9"><input placeholder="请输入..." /></td>
            <td class="backspace">退格</td>
            <td class="clear">清空</td>
            <td class="space">空格</td>
        </tr>
        <tr>
            <td class="char">1</td>
            <td class="char">2</td>
            <td class="char">3</td>
            <td class="char">4</td>
            <td class="char">5</td>
            <td class="char">6</td>
            <td class="char">7</td>
            <td class="char">8</td>
            <td class="char">9</td>
            <td class="char">0</td>
            <td class="char">A</td>
            <td class="char">B</td>
        </tr>
        <tr>
            <td class="char">C</td>
            <td class="char">D</td>
            <td class="char">E</td>
            <td class="char">F</td>
            <td class="char">G</td>
            <td class="char">H</td>
            <td class="char">I</td>
            <td class="char">J</td>
            <td class="char">K</td>
            <td class="char">L</td>
            <td class="char">M</td>
            <td class="char">N</td>
        </tr>
        <tr>
            <td class="char">O</td>
            <td class="char">P</td>
            <td class="char">Q</td>
            <td class="char">R</td>
            <td class="char">S</td>
            <td class="char">T</td>
            <td class="char">U</td>
            <td class="char">V</td>
            <td class="char">W</td>
            <td class="char">X</td>
            <td class="char">Y</td>
            <td class="char">Z</td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    (function(jQuery){
        var _globaloptions = {
            input: "input",
            readonly: true,
            backspaceClass: "backspace",
            clearClass: "clear",
            spaceClass: "space",
            charClass: "char",
            keyup: undefined
        }

        var $input, $backspace, $clear, $space, $char;

        var _init = function ($keyboard){
            $input = $keyboard.find(_globaloptions.input);
            $input.attr("readonly", _globaloptions.readonly);
            $backspace = $keyboard.find("." + _globaloptions.backspaceClass);
            $clear = $keyboard.find("." + _globaloptions.clearClass);
            $space = $keyboard.find("." + _globaloptions.spaceClass);
            $char = $keyboard.find("." + _globaloptions.charClass);
            _addClickListener();
        }

        var _addClickListener = function(){
            $backspace.click(function(){
                var val = $input.val();
                if(val.length == 0) return;
                $input.val(val.substr(0, val.length - 1));
                _globaloptions.keyup();
            });
            $clear.click(function(){
                $input.val("");
                _globaloptions.keyup();
            });
            $space.click(function(){
                var val = $input.val();
                val += ' ';
                $input.val(val);
                _globaloptions.keyup();
            });
            $char.click(function(){
                var val = $input.val();
                val += $(this).text();
                $input.val(val);
                _globaloptions.keyup();
            });
        }

        $.fn.keyboard = function(myopt) {
            if(myopt !== undefined){
                $.extend(_globaloptions, myopt);
            }
            _init(this);
        }
    })( jQuery );


    function searchForm(){
        console.info("更新列表内容");
    }

    $("#keyboard").keyboard({
        keyup: searchForm
    });
</script>
</body>
</html>

Keybo-X

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页键盘Demo

html>html>head> meta charset="utf-8"> title>网页键盘Demotitle> script src="https://cdn.bootcss.com/jquery/1.3.2/jquery.js">script> style type="text/css"> .keyboard{padding: 30px
复制链接

扫一扫