Блог

Ситуация: у вас есть веб-страница с формой, в которой есть поля имени и фамилии. Приложение поддерживает локализацию (например, метки для этих полей отображаются на выбранном языке и т. Д.).

В английской версии все в порядке, но когда дело доходит до японской версии, им нужно поменять местами два поля: сначала фамилию, а затем имя. Теперь вам нужно поменять местами текстовые поля и метки. Чтобы избежать неуклюжей логики на стороне сервера if (Japanese version) { lay out this way } else { lay out the other way } , мы выбрали решение на основе CSS, в котором для каждой версии загружается файл css, зависящий от языка. В японском CSS-файле вы используете такие правила, чтобы элементы менялись местами, но важно то, что HTML, который покидает сервер, всегда один и тот же.

Теперь проблема с порядком табуляции… порядок табуляции будет следовать порядку в DOM, поэтому он будет переходить неестественно из поля имени в поле фамилии.

Интересно, есть ли достаточно чистое решение для исправления как визуального порядка, так и порядка табуляции, которое может быть достигнуто в основном на стороне клиента, без жестких кодов на стороне сервера.

Направление, которое я бы рассмотрел, если вам не нужны «жестко закодированные» макеты, — это использовать CSS для макета (готово), а затем JavaScript для порядка табуляции. С моей точки зрения, это означает установку / изменение значений индекса вкладки.