通过键盘控制页面行为答案

【问题标题】：Control page behavior by key board通过键盘控制页面行为
【发布时间】：2015-02-24 15:35:06
【问题描述】：

我需要通过键盘控制行为页面......我正在尝试这样：

this.showSearcherCustomerKeyCommand = function (data, event) {
        if (event.shiftKey && event.keyCode == 49) {
            alert("Combination done !");
        }
    };

我在一个部分中设置了绑定，在我在一个div中设置了绑定之后，结果不成功......所以我需要的是我的页面的行为可以通过键盘控制......我的用户可以进行这种组合：Crtl + 1，ctrl + 2，通过淘汰赛我可以显示，隐藏（模态），应用或清理节点绑定以及其他东西......这可能吗？谢谢...

更新

这是我的视图模型：

Billing.BillingViewModel = function () {

    this.billingDate = ko.observable();
    this.billingCode = ko.observable();
    this.billingId = ko.observable();
    this.billingIva = ko.observable(0);
    this.billingSubTotal = ko.observable(0);

    this.billingTotal = ko.observable(0);
    this.billingObservations = ko.observable("");
    this.billingDetails = ko.observableArray();
    this.billingState = ko.observable();

    this.billingClient = new Billing.ClientViewModel();
    this.billingCurrentProductSelected = new Billing.ProductViewModel();
    this.showSearcherCustomerKeyCommand = function (data, event) {
        if (event.shiftKey && event.keyCode == 49) {
            alert("Combination done !");
        }
    };
};

这是应用绑定的时间：

Billing.SetViewModel = function () {

    theMainViewModel = Billing.PrepareBilling();
    theManagerViewModel = new Billing.ManagerBillingViewModel();
    theGeneralViewModel = new Billing.GeneralViewModel();

    ko.applyBindings(theMainViewModel.Billing, $("#" + Billing.BillingHeaderSecction)[0]);
    ko.applyBindings(theMainViewModel.Billing, $("#" + Billing.BillFooterSecction)[0]);
    ko.applyBindings(theMainViewModel.Billing, $("#" + Billing.BillProductChoosenSecction)[0]);
    ko.applyBindings(theMainViewModel.Billing, $("#" + Billing.BillDetailsSecction)[0]);
    ko.applyBindings(theMainViewModel.FinishBilling, $("#" + Billing.BillFinishSecction)[0]);
    ko.applyBindings(theManagerViewModel, $("#" + Billing.ManagerSecction)[0]);

    ko.applyBindings(theMainViewModel, $("#" + Billing.BillActionsSecction)[0]);
    ko.applyBindings(theMainViewModel, $("#" + Billing.SelectorModalSearcherCustomerId)[0]);
    ko.applyBindings(theMainViewModel, $("#" + Billing.SelectorModalSearcherProductId)[0]);
    //ko.applyBindings(theGeneralViewModel, $("#" + Billing.BillGeneralSecction)[0]);

    theManagerViewModel.theBillings.push(theMainViewModel);
    Billing.SetMask();
};

这是我的部分标签控件（HTML）：

<section id="BillHeaderSecction" **data-bind="event: { keypress: billingClient.showSearcherCustomerKeyCommand }, valueupdate: 'afterkeydown'"**>
                <input type="hidden" id="hdfBillingId" name="BillingId" data-bind="value: billingId" />
                <table style="width: 100%">
                    <tr>
                        <td style="width: 30%">
                            <label>Cliente</label>
                            <input style="width: 100%" type="text" readonly name="Client" id="txtClient" data-bind="value: billingClient.name" />
                        </td>
                        <td style="width: 5%"></td>
                        <td style="width: 30%">
                            <label>Fecha</label>
                            <input style="width: 100%" type="text" readonly name="CreationDate" id="txtCreationDate" data-bind="value: billingDate" />
                        </td>
                        <td style="width: 5%"></td>
                        <td style="width: 30%">
                            <label>Código</label>
                            <input style="width: 100%" type="text" readonly name="BillingCode" id="txtBillingCode" data-bind="value: billingCode" />
                        </td>
                    </tr>
                </table>
            </section>

PD：我已经将我希望被键盘控制的部分标记加粗

【问题讨论】：

是的，这是可能的。显示其余代码。事件监听器在哪里？

标签： javascript jquery asp.net-mvc knockout.js

【解决方案1】：

keydown 和 keypress 将为您提供不同的 event.keyCode 值。我猜你必须改用keydown。

看这个Keyevent Tester

我刚刚使用 keydown 和 keypress 事件测试了您的代码：

  ...

  var showSearcherCustomerKeyCommand = function (event) {
       if (event.shiftKey && event.keyCode == 49) {
        alert("Combination done ! (Fired by keydown event)");
      }
  };
  window.onkeydown = showSearcherCustomerKeyCommand; // alert 49
  window.onkeypress = showSearcherCustomerKeyCommand; // alert 33

并且...event 将是传递给您的函数的第一个参数。

http://jsfiddle.net/01teg8yL/2/

【讨论】：