网页键盘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 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">1td>
            <td class="char">2td>
            <td class="char">3td>
            <td class="char">4td>
            <td class="char">5td>
            <td class="char">6td>
            <td class="char">7td>
            <td class="char">8td>
            <td class="char">9td>
            <td class="char">0td>
            <td class="char">Atd>
            <td class="char">Btd>
        tr>
        <tr>
            <td class="char">Ctd>
            <td class="char">Dtd>
            <td class="char">Etd>
            <td class="char">Ftd>
            <td class="char">Gtd>
            <td class="char">Htd>
            <td class="char">Itd>
            <td class="char">Jtd>
            <td class="char">Ktd>
            <td class="char">Ltd>
            <td class="char">Mtd>
            <td class="char">Ntd>
        tr>
        <tr>
            <td class="char">Otd>
            <td class="char">Ptd>
            <td class="char">Qtd>
            <td class="char">Rtd>
            <td class="char">Std>
            <td class="char">Ttd>
            <td class="char">Utd>
            <td class="char">Vtd>
            <td class="char">Wtd>
            <td class="char">Xtd>
            <td class="char">Ytd>
            <td class="char">Ztd>
        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>

你可能感兴趣的:(web)