如何在计算更新后设置输入焦点

我有表格/网格显示基于它们类型的设备。每当下拉改变时，表格应该更新以显示正确的设备。要做到这一点，我有一个计算器按类型过滤设备，并向表格/网格添加一个新的空白行。如何在计算更新后设置输入焦点

这里的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

如何在计算更新后设置输入焦点

回答

相关问题