通过键盘控制页面行为

时间:2015-02-24 15:35:06

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

我需要通过键盘来控制行为页面......我试着这样:

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:我已经加入了我希望由键盘控制的分区标签

1 个答案:

答案 0 :(得分:1)

keydownkeypress会为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/