网页需要灵活的 UI
情况：您有一个网页，其中包含一个带有名字和姓氏框的表单。该应用程序支持本地化（例如，这些字段的标签以所选语言显示等）。
在英文版本中一切都很好，但在日文版本中，他们需要颠倒两个字段：首先是姓氏，然后是名字。现在您需要交换文本框和标签。为了避免笨拙的服务器端逻辑，例如 if (日语版) {lay out this way } else {lay out the other way }，我们选择了基于 CSS 的解决方案，其中特定于语言的 css 文件是为每个版本加载。在日语 CSS 文件中，您使用这样的规则，以便元素交换位置，但重要的是离开服务器的 HTML 始终相同。
现在的问题是 Tab 键顺序... Tab 键顺序将遵循 DOM 中的顺序，因此它会不自然地从名字框跳到姓氏框。
我想知道是否有一个足够干净的解决方案来修复视觉顺序和制表符顺序，这些解决方案主要可以在客户端实现，而无需服务器端硬编码。
Situation: you have a web page with a form that has a first name and last name boxes. The application supports localization (e.g. the labels for these fields show up in the selected language, etc).
All is fine in the English version but when it comes to the Japanese one, they need the two fields reversed: first the last name and then the first name. Now you need to swap both the textboxes and the labels. In order to avoid clumsy server side logic like if (Japanese version) { lay out this way } else { lay out the other way } we've chosen a CSS based solution where a language specific css file is loaded for each version. In the Japanese CSS file you use such rules so that elements swap their places but what's important is that the HTML that leaves the server is always the same.
Now the issue is with tab order... tab order will follow the order in DOM so it will jump un-naturally from the first name box to the last name box.
I wonder if there is a clean enough solution to fix both visual order and tab order that can be achieved mostly client-side, without server side hardcodings.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您不想要“硬编码”布局，我会考虑的方向是使用 CSS 进行布局（完成），然后使用 JavaScript 进行 Tab 键顺序。在我的脑海中，这意味着设置/更改选项卡索引值。
The direction I would consider, if you don't want "hardcoded" layouts is to use CSS for layout (done) and then JavaScript for tab order. Off the top of my head, this means setting/changing tab index values.