動的テキスト入力に値を割り当てる方法

Question

質問： QTY入力を含むカスタム数値キーボードと動的表があります。私の質問は、任意の数字に触れる前にフォーカスを持っていたランダムなQTY入力に、タッチされた数字の値を割り当てるための最良の方法は何ですか？

例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

あなたは最後に注力いた制御を追跡するためにスキャンした項目の入力に結合blurイベントを使用することができます。

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