2

I have multiple trix inputs on a form. Usually in forms when you press the tab key within a form input: it jumps you to the next form input. I noticed that on a desktop computer: tabbing for trix inputs actually tabs you through all the trix toolbar buttons before finally getting to the next input. Interestingly: it works as expected with an iPad and bluetooth keyboard.

This issue was pointed out on trix's github: located here. The issue was closed though since there were work arounds posted on there that apparently fix the issue. Here is one of the suggestions:

for (var element of event.target.toolbarElement.querySelectorAll("button")) {
  element.tabIndex = -1
}

However, when I plugged that into my app and I looked at the front-end error logs, here is what it says:

TypeError: element of event.target.toolbarElement.querySelectorAll is not a function. (In 'element of event.target.toolbarElement.querySelectorAll("button")', 'element of event.target.toolbarElement.querySelectorAll' is undefined)

I trust that the solution works, but I am probably missing something. I not extremely familiar with javascript, so the error message is a bit cryptic to me.

  • trix documentation
  • I don't think this applies here: but I am using this in a rails project, and I bring trix in via the trix gem.
4

1 回答 1

0

Just had to change the syntax, and it worked:

document.addEventListener("trix-initialize", function(event) {
  var elementButtons = event.target.toolbarElement.querySelectorAll("button")

  for (i=0; i<elementButtons.length; i++) {
    elementButtons[i].tabIndex = -1 ;
  }
})
于 2017-07-21T14:49:48.850 回答