是否可以通过jquery将硬键盘的功能与硬件键盘相同？

Question

我的jquery代码就是这个。

我使用过autocomplete和jskeyboard.js但是自动完成功能不起作用。请给我一些建议。我寻找更多但没有成功。一件事：如何在这个键盘中添加硬件键盘的所有功能。

//adds extra table rows
var i = $('table#invoiceTable tr').length;
$("#addmore").on('click', function() {
    html = '<tr>';
    html += '<td><input class="case" type="checkbox"/></td>';
    html += '<td><span id="snum">' + i + '</span>';
    html += '<td style="display:none;"><input type="text" data-type="id" name="data[' + i + '][id]" id="id_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';

    html += '<td style="display:none;"><input type="text" data-type="vendor_id" name="data[' + i + '][vendor_id]" id="vendor_id_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';

    html += '<td><input type="text" data-type="productCode" name="data[' + i + '][productCode]" id="itemNo_' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';

    html += '<td style="display:none;"><input type="text" data-type="product_id" name="data[' + i + '][product_id]" id="product_id_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';

    html += '<td style="textAlign"><input type="text" data-type="productName" name="data[' + i + '][product_name]" id="itemName_' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';



    html += '<td style="display:none;"><input type="text" data-type="bar_code" name="data[' + i + '][bar_code]" id="bar_code_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';

    html += '<td><input type="text" data-type="product_hsn" name="data[' + i + '][product_hsn]" id="itemName_' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" data-type="CGST" name="data[' + i + '][CGST]" id="CGST_' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" data-type="SGST" name="data[' + i + '][SGST]" id="SGST_' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" data-type="price" name="data[' + i + '][price]" id="price_' + i + '" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '<td><input type="text" name="data[' + i + '][quantity]" id="quantity_' + i + '" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '<td><input type="text" name="data[' + i + '][total]" id="total_' + i + '" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';


    html += '<td style="display:none;"><input type="text" data-type="mar_price" name="data[' + i + '][mar_price]" id="mar_price_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';

    html += '<td style="display:none;"><input type="text" data-type="percentage_of_admin" name="data[' + i + '][percentage_of_admin]" id="percentage_of_admin_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';

    html += '<td style="display:none;"><input type="text" data-type="percentage_of_beneficiary" name="data[' + i + '][percentage_of_beneficiary]" id="percentage_of_beneficiary_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';

    html += '<td style="display:none;"><input type="text" data-type="cast_price" name="data[' + i + '][cast_price]" id="cast_price_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';

    html += '<td style="display:none;"><input type="text" data-type="canteen_id" name="data[' + i + '][canteen_id]" id="canteen_id_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';

    html += '<td style="display:none;"><input type="text" data-type="vendor_id" name="data[' + i + '][vendor_id]" id="vendor_id_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';


    html += '</tr>';
    $('table#invoiceTable').append(html);
    i++;
});




//to check all checkboxes
$(document).on('change', '#check_all', function() {
    $('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});

//deletes the selected table rows
$("#delete").on('click', function() {
    $('.case:checkbox:checked').parents("tr").remove();
    $('#check_all').prop("checked", false);
    calculateTotal();
});

//autocomplete script
$(document).on('focus change', '.autocomplete_txt', function(e) {
    //$(document).on('focus,change','.autocomplete_txt',function(e){
    //console.log(e);

    type = $(this).data('type');
    var ctr = $(this);
    if (type == 'product_code') autoTypeNo = 2;
    if (type == 'product_name') autoTypeNo = 4;
    if (type == 'bar_code') autoTypeNo = 5;

    $(this).autocomplete({
        source: function(request, response) {
            $.ajax({
                url: 'ajax.php',
                dataType: "json",
                method: 'post',
                data: {
                    name_startsWith: request.term,
                    type: type
                },

                success: function(data) {
                    console.log(data);


                    response($.map(data, function(item) {
                        var code = item.split("|");
                        return {
                            label: code[autoTypeNo],
                            value: code[autoTypeNo],
                            value1: code[autoTypeNo],
                            data: item
                        }
                    }));
                }
            });
        },
        autoFocus: true,
        minLength: 1,

        select: function(event, ui) {


            $('#addmore').trigger('click');


            var names = ui.item.data.split("|");



            id_arr = $(this).attr('id');
            id = id_arr.split("_");

            itemNo_1 = $('#id_arr').val();

            $('#invoiceTable tr:last td:eq(2) input[type="text"]').val(names[0]);
            $('#invoiceTable tr:last td:eq(3) input[type="text"]').val(names[1]);
            $('#invoiceTable tr:last td:eq(4) input[type="text"]').val(names[2]);
            $('#invoiceTable tr:last td:eq(5) input[type="text"]').val(names[3]);
            $('#invoiceTable tr:last td:eq(6) input[type="text"]').val(names[4]);
            $('#invoiceTable tr:last td:eq(7) input[type="text"]').val(names[5]);
            $('#invoiceTable tr:last td:eq(8) input[type="text"]').val(names[6]);
            $('#invoiceTable tr:last td:eq(9) input[type="text"]').val(names[7]);
            $('#invoiceTable tr:last td:eq(10) input[type="text"]').val(names[8]);
            $('#invoiceTable tr:last td:eq(11) input[type="text"]').val(names[9]);
            $('#invoiceTable tr:last td:eq(12) input[type="text"]').val(1);
            $('#invoiceTable tr:last td:eq(13) input[type="text"]').val(1 * names[9]);
            $('#invoiceTable tr:last td:eq(14) input[type="text"]').val(names[10]);
            $('#invoiceTable tr:last td:eq(15) input[type="text"]').val(names[11]);
            $('#invoiceTable tr:last td:eq(16) input[type="text"]').val(names[12]);
            $('#invoiceTable tr:last td:eq(17) input[type="text"]').val(names[13]);
            $('#invoiceTable tr:last td:eq(18) input[type="text"]').val(names[14]);
            $('#invoiceTable tr:last td:eq(19) input[type="text"]').val(names[15]);

            calculateTotal();

            $(this).val("");
            return false;




        }
    });
});

//price change
$(document).on('change keyup blur', '.changesNo', function() {
    id_arr = $(this).attr('id');
    id = id_arr.split("_");
    quantity = $('#quantity_' + id[1]).val();
    price = $('#price_' + id[1]).val();
    if (quantity != '' && price != '') $('#total_' + id[1]).val((parseFloat(price) * parseFloat(quantity)).toFixed(2));
    calculateTotal();
});

$(document).on('change keyup blur', '#tax', function() {
    calculateTotal();
});

//total price calculation 
function calculateTotal() {
    subTotal = 0;
    total = 0;
    $('.totalLinePrice').each(function() {
        if ($(this).val() != '') subTotal += parseFloat($(this).val());
    });
    $('#subTotal').val(subTotal.toFixed(2));
    tax = $('#tax').val();
    if (tax != '' && typeof(tax) != "undefined") {
        taxAmount = subTotal * (parseFloat(tax) / 100);
        $('#taxAmount').val(taxAmount.toFixed(2));
        total = subTotal + taxAmount;
    } else {
        $('#taxAmount').val(0);
        total = subTotal;
    }
    $('#totalAftertax').val(total.toFixed(2));
    calculateAmountDue();
}

$(document).on('change keyup blur', '#amountPaid', function() {
    calculateAmountDue();
});

//due amount calculation
function calculateAmountDue() {
    amountPaid = $('#amountPaid').val();
    total = $('#totalAftertax').val();
    if (amountPaid != '' && typeof(amountPaid) != "undefined") {
        amountDue = parseFloat(total) - parseFloat(amountPaid);
        $('.amountDue').val(amountDue.toFixed(2));
    } else {
        total = parseFloat(total).toFixed(2);
        $('.amountDue').val(total);
    }
}


//It restrict the non-numbers
var specialKeys = new Array();
specialKeys.push(8, 46); //Backspace
function IsNumeric(e) {
    var keyCode = e.which ? e.which : e.keyCode;
    console.log(keyCode);
    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
    return ret;
}

//datepicker
$(function() {
    $('#invoiceDate').datepicker({});
});


$(document).ready(function() {
    if (typeof errorFlag !== 'undefined') {
        $('.message_div').delay(5000).slideUp();
    }
});

var jsKeyboard = {
    settings: {
        buttonClass: "button", // default button class
        onclick: "jsKeyboard.write();", // default onclick event for button
        keyClass: "key", // default key class used to define style of text of the button
        text: {
            close: "close"
        }
    },
    "keyboard": [], // different keyboards can be set to this variable in order to switch between keyboards easily.
    init: function(elem, keyboard) {
        jsKeyboard.keyboard["default"] = jsKeyboard.defaultKeyboard;
        jsKeyboard.keyboardLayout = elem;

        if (keyboard != null && keyboard != undefined)
            jsKeyboard.generateKeyboard(keyboard);
        else
            jsKeyboard.generateKeyboard("default");

        jsKeyboard.addKeyDownEvent();

        jsKeyboard.show();
        $(':input,.autocomplete_txt').not('[type="reset"]').not('[type="submit"]').on('change keyup blur', function(e) {

            jsKeyboard.currentElement = $(this);
            jsKeyboard.currentElementCursorPosition = $(this).getCursorPosition('.autocomplete_txt');
            console.dir('keyboard is now focused on ' + jsKeyboard.currentElement.attr('name') + ' at pos(' + jsKeyboard.currentElementCursorPosition + ')');


        });
    },

    focus: function(t) {
        jsKeyboard.currentElement = $(t);
        jsKeyboard.show();
    },
    keyboardLayout: "", // it shows the html element where keyboard is generated
    currentKeyboard: "default", // it shows the which keyboard is used. If it's not set default keyboard is used.
    currentElement: null,
    generateKeyboard: function(keyboard) {
        var bClass = "";
        var kClass = "";
        var onclick = "";
        var text = "";

        var s = "";
        s += "<div id=\"keyboard\">";
        s += "<div id=\"keyboardHeader\">";
        //s += "<div onclick=\"jsKeyboard.hide();\"><span>" + jsKeyboard.settings.text.close + "</span><span class=\"closex\"> X</span></div>"
        s += "</div>";

        /*small letter */
        s += "<div id=\"keyboardSmallLetter\">";
        $.each(jsKeyboard.keyboard[keyboard].smallLetter, function(i, key) {
            generate(key);
        });
        s += "</div>";

        /*capital letter*/
        s += "<div id=\"keyboardCapitalLetter\">";
        $.each(jsKeyboard.keyboard[keyboard].capitalLetter, function(i, key) {
            generate(key);
        });
        s += "</div>";

        /*number*/
        s += "<div id=\"keyboardNumber\">";
        $.each(jsKeyboard.keyboard[keyboard].number, function(i, key) {
            generate(key);
        });
        s += "</div>";

        /*symbols*/
        s += "<div id=\"keyboardSymbols\">";
        $.each(jsKeyboard.keyboard[keyboard].symbols, function(i, key) {
            generate(key);
        });
        s += "</div>";

        function generate(key) {
            bClass = key.buttonClass == undefined ? jsKeyboard.settings.buttonClass : key.buttonClass;
            kClass = key.keyClass == undefined ? jsKeyboard.settings.keyClass : key.keyClass;
            onclick = key.onclick == undefined ? jsKeyboard.settings.onclick.replace("()", "(" + key.value + ")") : key.onclick;

            text = (key.isChar != undefined || key.isChar == false) ? key.value : String.fromCharCode(key.value);

            s += "<div class=\"" + bClass + "\" onclick=\"" + onclick + "\"><div class=\"" + kClass + "\">" + text + "</div></div>";

            bClass = "";
            kClass = "";
            onclick = "";
            text = "";
        }

        $("#" + jsKeyboard.keyboardLayout).html(s);
    },
    addKeyDownEvent: function() {
        $("#keyboardCapitalLetter > div.button, #keyboardSmallLetter > div.button, #keyboardNumber > div.button, #keyboardSymbols > div.button").
        bind('mousedown', (function() {
            $(this).addClass("buttonDown");
        })).
        bind('mouseup', (function() {
            $(this).removeClass("buttonDown");
        })).
        bind('mouseout', (function() {
            $(this).removeClass("buttonDown");
        }));

        //key focus down on actual keyboard key presses
        //todo:....

    },
    changeToSmallLetter: function() {
        $("#keyboardCapitalLetter,#keyboardNumber,#keyboardSymbols").css("display", "none");
        $("#keyboardSmallLetter").css("display", "block");
    },
    changeToCapitalLetter: function() {
        $("#keyboardCapitalLetter").css("display", "block");
        $("#keyboardSmallLetter,#keyboardNumber,#keyboardSymbols").css("display", "none");
    },
    changeToNumber: function() {
        $("#keyboardNumber").css("display", "block");
        $("#keyboardSymbols,#keyboardCapitalLetter,#keyboardSmallLetter").css("display", "none");
    },
    changeToSymbols: function() {
        $("#keyboardCapitalLetter,#keyboardNumber,#keyboardSmallLetter").css("display", "none");
        $("#keyboardSymbols").css("display", "block");
    },
    updateCursor: function() {
        //input cursor focus and position during typing
        jsKeyboard.currentElement.setCursorPosition(jsKeyboard.currentElementCursorPosition);
    },
    write: function(m) {
        var a = jsKeyboard.currentElement.val(),
            b = String.fromCharCode(m),
            pos = jsKeyboard.currentElementCursorPosition,
            output = [a.slice(0, pos), b, a.slice(pos)].join('');
        jsKeyboard.currentElement.val(output);
        jsKeyboard.currentElementCursorPosition++; //+1 cursor
        jsKeyboard.updateCursor();
    },
    del: function() {
        var a = jsKeyboard.currentElement.val(),
            pos = jsKeyboard.currentElementCursorPosition,
            output = [a.slice(0, pos - 1), a.slice(pos)].join('');
        jsKeyboard.currentElement.val(output);
        jsKeyboard.currentElementCursorPosition--; //-1 cursor
        jsKeyboard.updateCursor();
    },
    enter: function() {
        var t = jsKeyboard.currentElement.val();
        jsKeyboard.currentElement.val(t + "\n");
    },
    space: function() {
        var a = jsKeyboard.currentElement.val(),
            b = " ",
            pos = jsKeyboard.currentElementCursorPosition,
            output = [a.slice(0, pos), b, a.slice(pos)].join('');
        jsKeyboard.currentElement.val(output);
        jsKeyboard.currentElementCursorPosition++; //+1 cursor
        jsKeyboard.updateCursor();
    },
    writeSpecial: function(m) {
        var a = jsKeyboard.currentElement.val(),
            b = String.fromCharCode(m),
            pos = jsKeyboard.currentElementCursorPosition,
            output = [a.slice(0, pos), b, a.slice(pos)].join('');
        jsKeyboard.currentElement.val(output);
        jsKeyboard.currentElementCursorPosition++; //+1 cursor
        jsKeyboard.updateCursor();
    },
    show: function() {
        $("#keyboard").animate({
            "bottom": "0"
        }, "slow", function() {});
    },
    hide: function() {
        $("#keyboard").animate({
            "bottom": "-350px"
        }, "slow", function() {});
    },
    defaultKeyboard: {
        capitalLetter: [


        ],
        smallLetter: [
            // 1st row


            // 2nd row
            {
                value: 48
            }, {
                value: 49
            }, {
                value: 50
            },
            {
                value: 51
            }, {
                value: 52
            }, {
                value: 53
            },
            {
                value: 54
            }, {
                value: 55
            }, {
                value: 56
            }, {
                value: 57
            }, {
                value: 46
            },
            {
                value: "Delete",
                isChar: "false",
                onclick: "jsKeyboard.del()",
                buttonClass: "button button_del",
                keyClass: "key key_del"
            }


        ],
        number: [

        ],
        symbols: [

        ]
    }
}


// GET CURSOR POSITION
jQuery.fn.getCursorPosition = function() {
    if (this.length == 0) return -1;
    return $(this).getSelectionStart();
}
//Autocomplete

jQuery.fn.getSelectionStart = function() {
    if (this.length == 0) return -1;
    input = this[0];

    var pos = input.value.length;

    if (input.createTextRange) {
        var r = document.selection.createRange().duplicate();
        r.moveEnd('character', input.value.length);
        if (r.text == '')
            pos = input.value.length;
        pos = input.value.lastIndexOf(r.text);
    } else if (typeof(input.selectionStart) != "undefined")
        pos = input.selectionStart;

    return pos;
}

//SET CURSOR POSITION
jQuery.fn.setCursorPosition = function(pos) {
    this.each(function(index, elem) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
    return this;
};

我们如何在键盘和计算中使用自动完成功能？

Answer 1

从我所看到的，你定义了一个jsKeyboard对象，但你没有做任何事情。您可能需要调用jsKeyboard函数，以便在您的环境中初始化。

此外，jsKeyboard会对接受该功能的小部件执行自动初始化。但是，这仅适用于已具有名为jsKeyboard的类的小部件。如果在加载jsKeyboard后添加此类项目，则新添加的项目可能无法自动运行...

<input class="jsKeyboard" .../>

如果您还没有，则需要拨打电话。默认代码如下：

$(".jsKeyboard").jsKeyboard(true);

但是，如果您已在变量中拥有新对象，则只需调用：

my_widget.jsKeyboard(true);

就足够了。如果您的新对象是从HTML添加的，但是包含标识符标识符，您可以：

$("#my-object-id").jsKeyboard(true);

关于你的“硬件键盘”问题，我不太清楚jsKeyboard还没有提供你想要的东西。