如何在計算更新後設置輸入焦點

我有表格/網格顯示基於它們類型的設備。每當下拉改變時，表格應該更新以顯示正確的設備。要做到這一點，我有一個計算器按類型過濾設備，並向表格/網格添加一個新的空白行。如何在計算更新後設置輸入焦點

這裏的HTML：

<table> 
    <thead> 
     <tr> 
      <th><!--Row Number--></th> 
      <th>Serial No.</th> 
      <th>Name</th> 
      <th><!--Delete Button--></th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: filteredDevices"> 
     <tr> 
      <td data-bind="text: $index() + 1"></td> 
      <td><input data-bind="value: serial, event: { change: ($parent.filteredDevices().length == $index() + 1) ? $parent.addDevice : '' }" /></td> 
      <td><input data-bind="value: name, event: { change: ($parent.filteredDevices().length == $index() + 1) ? $parent.addDevice : '' }" /></td> 
      <td><button type="button" data-bind="visible: $parent.filteredDevices().length != $index() + 1, click: $parent.deleteDevice">Delete</button></td> 
     </tr> 
    </tbody> 
</table>

淘汰賽代碼：

var DevicesViewModel = function() { 
    var self = this; 

    self.devices = ko.observableArray([{ name: 'test1', serial: 'test1', type: 'type1' },{ name: 'test2', serial: 'test2', type: 'type2' }]); 
    self.selectedDeviceType = ko.observable("type1"); 

    self.deviceTypes = ko.observableArray([ 
     { value: 'type1', name: 'Type 1' }, 
     { value: 'type2', name: 'Type 2' } 
    ]); 

    self.addDevice = function (data) { 
     self.devices.push({ name: data.name, serial: data.serial, type: data.type }); 
    }; 

    self.deleteDevice = function (device) { 
     self.devices.remove(device); 
    }; 

    self.filteredDevices = ko.computed(function() { 
     var arr = ko.utils.arrayFilter(self.devices(), function (device) { 
      return device.type == self.selectedDeviceType(); 
     }); 

     arr.push({ name: null, serial: null, type: self.selectedDeviceType() }); 

     return arr; 
    }); 
}; 

ko.applyBindings(new DevicesViewModel());

這裏是搗鼓它：https://jsfiddle.net/wa9108bf/

如果標籤通過網格最初，一切工作正常。但是，如果您在最後一行的第一個輸入中輸入了某些內容，並且選項卡翻轉了，焦點就會丟失。我猜這發生的原因是計算機更新和表格再次與新的計算數組，對焦點一無所知的渲染。有沒有辦法獲得我想要的功能？

來源

2017-09-05 homes

這是一個益智遊戲。 –

輸入將失去焦點，因爲您要刪除當前項目並添加副本。如果您保留陣列中的當前項目，焦點將保持不變。

變化

self.addDevice = function (data) { 
    self.devices.push({ name: data.name, serial: data.serial }); 
};

到

self.addDevice = function (data) { 
    self.devices.push(data); 
};

來源

2017-09-05 23:50:02

如何在計算更新後設置輸入焦點

回答

相關問題