2015-02-24 152 views
0

我需要控制由键盘行为页的控制页面的行为......我是想这样的:通过键盘

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

我设置在secction的结合,我已经设置了绑定之后在一个div,结果是不成功的...所以我需要的是,我的网页的行为可以通过键盘控制...我的用户可以做出这种组合:Crtl + 1,ctrl + 2,无论和那通过淘汰赛,我可以显示,隐藏(模态),应用或cleannode绑定,以及其他事情......这是可能的?谢谢...

UPDATE

这里是我的视图模型:

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(); 
}; 

这里是我的secction标签控制( 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

是的,这是可能的。显示其余的代码。事件监听器在哪里? – treegarden 2015-02-24 15:36:30

回答

1

​​和keypress会给你event.keyCode不同的值控制secction标签。我想你必须改用​​。

看看这个Keyevent Tester

我只是测试用的keydown和按键事件代码:

... 

    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/