javascript - 通过键盘控制页面行为

Question

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

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

在div中设置绑定(bind)后，我在一个section中设置了绑定(bind)，结果不成功...所以我需要的是我的页面的行为可以通过键盘控制...我的用户可以进行这种组合:Crtl + 1，ctrl + 2，无论什么，通过 knockout ，我可以显示，隐藏(模式)，应用或cleannode绑定(bind)，以及其他东西......这是可能的？谢谢...

更新

这是我的 View 模型:

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 !");
        }
    };
};

这是应用绑定(bind)的时间:

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:我已将我希望由键盘控制的部分标记加粗

Answer 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/