如何爲動態文本輸入分配一個值

Question

問題： 我有一個自定義數字鍵盤和一個包含數量輸入的動態表。我的問題是，在接觸任何數字之前，爲了將已觸摸數字的值分配給有焦點的隨機數量輸入，最好的辦法是什麼？

例https://jsfiddle.net/kyr6w2x3/166/

HTML：

<table class="table "> 
     <thead> 
      <tr> 
       <th class="text-center">Item</th> 
       <th class="text-center">Qty</th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach:ListOfScannedItems"> 
      <tr> 
       <td><input type="text" class="form-control" placeholder="" data-bind="textInput:Item"></td> 
       <td><input type="number" class="form-control" data-bind="textInput:Quantity" /></td> 
      </tr> 
     </tbody> 
</table> 

<input type="text" class="form-control margin-top-5" placeholder="type something" data-bind="textInput:scanItemInput"> 
<input type="button" data-bind="click:AddItem" value="Add"> 

<ul id="keyboard"> 
    <li class="symbol" data-bind="click: function() {keybordClicked(1)}"><span class="off">1</span></li> 
    <li class="symbol" data-bind="click: function() {keybordClicked(2)}"><span class="off">2</span></li> 
    <li class="symbol" data-bind="click: function() {keybordClicked(3)}"><span class="off">3</span></li> 
    <li class="symbol" data-bind="click: function() {keybordClicked(4)}"><span class="off">4</span></li> 
    <li class="symbol" data-bind="click: function() {keybordClicked(5)}"><span class="off">5</span></li> 
    <li class="symbol" data-bind="click: function() {keybordClicked(6)}"><span class="off">6</span></li> 
    <li class="symbol" data-bind="click: function() {keybordClicked(7)}"><span class="off">7</span></li> 
    <li class="symbol" data-bind="click: function() {keybordClicked(8)}"><span class="off">8</span></li> 
    <li class="symbol" data-bind="click: function() {keybordClicked(9)}"><span class="off">9</span></li> 
    <li class="symbol" data-bind="click: function() {keybordClicked(0)}"><span class="off">0</span></li> 
    <li class="delete lastitem" data-bind="click: function() {keybordClicked(-1)}">⌫</li> 
</ul> 

VM：

var appVM = function(){ 
    var self = this; 
    self.scanItemInput = ko.observable(); 
    self.ListOfScannedItems = ko.observableArray([]); 
    self.AddItem = function() { 
     self.ListOfScannedItems.push(new ScannedItemVM({ Item: self.scanItemInput()})); 
     self.scanItemInput(""); 
    } 
    self.keybordClicked = function(value){ 
    console.log(value); 
     // how to assign this value to the input that has focused before pressing on any number 
    } 
} 

var ScannedItemVM = function (data) { 
    var self = this; 
    self.Item = ko.observable(data.Item); 
    self.Quantity = ko.observable(""); 
} 
var vm = new appVM(); 
ko.applyBindings(vm); 

Answer 1

可以使用模糊事件在掃描項目的投入結合來跟蹤控制中具有焦點最後。

<input type="number" class="form-control" data-bind="textInput:Quantity, event: {blur: $parent.onBlur}" /> 

...

self.lastFocused = ko.observable(); 
self.onBlur = function(data, event){ 
    self.lastFocused(data); 
} 

那麼當你的鍵盤點擊可以更新輸入的視圖模型的數量。

self.keybordClicked = function(value){ 
console.log(value); 
    // how to assign this value to the input that has focused before pressing on any number 
    //console.log(self.ListOfScannedItems()[0].HasFocus()); 
    self.lastFocused().Quantity(value); 
} 

更新例如：https://jsfiddle.net/jlspake/kyr6w2x3/167/