如何在计算更新后设置输入焦点
问题描述:
我有表格/网格显示基于它们类型的设备。每当下拉改变时,表格应该更新以显示正确的设备。要做到这一点,我有一个计算器按类型过滤设备,并向表格/网格添加一个新的空白行。如何在计算更新后设置输入焦点
这里的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/
如果标签通过网格最初,一切工作正常。但是,如果您在最后一行的第一个输入中输入了某些内容,并且选项卡翻转了,焦点就会丢失。我猜这发生的原因是计算机更新和表格再次与新的计算数组,对焦点一无所知的渲染。有没有办法获得我想要的功能?
答
输入将失去焦点,因为您要删除当前项目并添加副本。如果您保留阵列中的当前项目,焦点将保持不变。
变化
self.addDevice = function (data) {
self.devices.push({ name: data.name, serial: data.serial });
};
到
self.addDevice = function (data) {
self.devices.push(data);
};
这是一个益智游戏。 –