0

我的任务是创建一系列跨度文本元素，这将允许我在遍历 html 文档时提供制表操作。

在我的解决方案中，我有一些 ajax 更新，并且某些 html 元素可以编辑，而其他的则不能。但是，我在我提供的示例中删除了这些细节。

所以操作方式是当我点击一个span元素时，它会变成一个输入框。我想要的是当我按下 TAB 键时，它应该转到具有“test”类的下一个元素跨度，将下一个元素切换到输入框并将旧输入框更改为跨度。

但是，我还希望每当我在任何输入框上时，它都会自动将我切换到一个跨度，而无需任何遍历。

我面临的问题是我可以让一个或另一个工作，但不能同时工作。

  1. 当我将模糊功能设置为工作时。我可以将 span 元素交换为输入，当我将注意力移出它时，它会恢复正常，但制表符不起作用。
  2. 当我让选项卡功能工作时，我可以通过一系列跨度元素进行选项卡，但是当我尝试通过单击正文文档来关注输入时，它不会将输入框更改回跨度。

根本问题是因为这两个操作都会触发focusout事件。但是当我点击时，它keydown首先执行事件，然后触发focusout事件。

我在这里附上一个 jsfiddle：http: //jsfiddle.net/QcGag/1/

注意在代码中，我使用了一个canTab标志。如果您按原样保留代码，它可以正确地通过标签。因此，单击Test 1并继续tab按键。它将跳过“测试 3”。现在，在模糊功能将起作用但制表符被禁用//之前删除。cellElem.canTab = false;我需要让两者都工作。

我会接受有关设计或编码结构的建议。

这是代码的最新更新：http: //jsfiddle.net/QcGag/3/

这实际上适用于 IE 7-9，但不适用于 Google Chrome；错误出现为：

“未捕获的错误：NOT_FOUND_ERR：DOM 异常 8”

我所做的是将下一个元素设置为，""并在 的 if 语句中检查下一个元素的长度（是否存在）canTraverse()。注意：我将save()第一个代码示例中的名称更改为canTraverse().

张贴在 jQuery 论坛： http ://bugs.jquery.com/ticket/12505

发布在谷歌铬： http ://code.google.com/p/chromium/issues/detail?id=147759

4

1 回答 1

0

好的，我想出了一个解决方案：

设计中的关键是将焦点输出与 keydown 上的逻辑分开，然后通过确定 span 是如何首先转换为输入框（通过标签进入或单击）来处理它。

然后我通过 latestCellInfo 跟踪动态创建的文本框的位置。此信息很有用，因此我可以在任何未来事件中使用该信息并更好地组织代码。

exit_edit标志：这表示输入框的输入方式：通过 Tab 键进入，或单击进入。因此，当我从前一个文本框中跳出时，它被设置为 false，但是当输入获得焦点时，它又被设置为 true。当您集中注意力时，它会检查我们是否可以继续分页。

will_tab标志：这表示无论我是否更改了值，我是否应该继续使用制表符。这在“canTraverse”函数中进行了检查

http://jsfiddle.net/QcGag/7/

我仍然在打开谷歌论坛中保留这个问题，因为我最初的设计中不应该抛出异常。

Note: changing the text in the input and exiting will not work in the example. My question on this forum was specifically for the operation of traversing, not for data handling. It automatically worked on my side since I'm returning the data via ajax and it's replacing the component before I replaceWith old_elem. But if anyone else needs to traverse through like the way I did, this'd be a good start.

于 2012-09-11T19:04:27.657 回答