Question

TAB导航中断因为渲染器替换了DOM元素。

主干渲染方法旨在处理整个视图的标记，而不仅仅是改变了东西......

鉴于以下内容 - 我在html标签上正确设置tabindex以指定Tab键顺序。 - 我在键盘上使用TAB从一个字段导航到另一个字段。 - 当模型状态发生变化时，我绑定到调用render的change change事件，如下所示： - this.model.bind（'change'，this.render）; - 我将字段和标签中的内容更改为下一个（触发模型更改事件）

如果没有显式代码检查所有已更改的属性，并且没有替换主干（因为这不是当前项目的选项），是否有人可以解决此问题

示例：

启动TODO 应用程序创建2个TODO，选项卡到第一个TODO并按空格键以标记完成。然后尝试Tab键到下一个字段，而不是去下一个TODO你回到需要做的输入:(

Answer 1

以下是我最终解决的问题： -

它为没有id的所有元素添加了生成的id，这些id对于处于相同状态的模型是相同的。

render: function(x) {
  var html = this.options.template(this.model.toJSON());
  var focused = window.document.activeElement.id; //Get the focused element
  this.el.innerHTML = html;
  this.decorate();
  if (focused) $('#' + focused).focus(); //Focus if previously focused prior to innerHTML
  return this;
},

decorate: function() {
  var i = 0;
  var idPrefix = 'ENTER PREFIX HERE'
  this.$el.find('*').each(function() {
    if (!this.id) this.id = idPrefix + ((++i).toString(36)); //Add id if none exists
  });
}

使用backbone.js时，键盘TAB导航断开

1 个答案: