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

2023年12月21日 220次阅读

TAB导航中断因为render替换了DOM元素.

主干渲染方法设计用于整个视图的标记,而不仅仅是改变了东西……

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

有没有人解决这个问题,没有明确的代码检查所有更改的属性,并且没有替换主干(因为这不是当前项目的选项)

例：

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

最佳答案 这是我最终得到的解决方案： –

它为没有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
  });
}
点赞