Атрибут dir тега <datalist>
Описание
Атрибут dir для тега <datalist> определяет направление текста в вариантах автодополнения. Однако на практике этот атрибут имеет ограниченное применение, так как браузеры обычно наследуют направление текста от связанного элемента <input> или страницы.
Особенность: Реальное отображение выпадающего списка вариантов зависит от браузера и не всегда учитывает атрибут
Рекомендуемый способ использования:
dir у <datalist>.
<!-- Лучше задавать dir на input или общем контейнере -->
<div dir="rtl">
<input list="arabic-list" placeholder="اكتب هنا">
<datalist id="arabic-list">
<option value="نص عربي">
<option value="اختيار">
</datalist>
</div>
Технические детали:
| Значение | Поведение | Поддержка браузерами |
|---|---|---|
ltr |
Текст слева направо | Частичная (наследуется от input) |
rtl |
Текст справа налево | Частичная (наследуется от input) |
auto |
Автоматическое определение | Очень ограниченная |
Практическое решение для RTL:
<style>
/* Принудительное RTL для input и вариантов */
.rtl-input, .rtl-input + datalist {
direction: rtl;
text-align: right;
}
</style>
<input list="hebrew-list" class="rtl-input" placeholder="הקלד כאן">
<datalist id="hebrew-list">
<option value="אופציה 1">
<option value="אופציה 2">
</datalist>
JavaScript-полифил для полной поддержки:
<script>
document.addEventListener('input', function(e) {
const input = e.target;
if (input.list) {
const datalist = document.getElementById(input.list.id);
if (datalist && datalist.dataset.dir) {
input.style.direction = datalist.dataset.dir;
}
}
});
</script>
<input list="dir-list">
<datalist id="dir-list" data-dir="rtl">
<option value="اختيار 1">
<option value="اختيار 2">
</datalist>
Важные замечания:
- Лучше задавать направление текста на элементе
<input> - Для сложных RTL-интерфейсов используйте CSS-стили
- Проверяйте отображение в разных браузерах
- Для числовых значений в RTL используйте
dir="ltr" - Сочетайте с атрибутом
langдля лучшей семантики
Пример с комбинированным направлением:
<input list="mixed-list" dir="auto" placeholder="Введите текст">
<datalist id="mixed-list">
<option value="Text (טקסט)">
<option value="123 (מספר)">
</datalist>
Примечание: Хотя атрибут dir может быть применен к <datalist>, для надежного управления направлением текста в автодополнении рекомендуется использовать CSS-стили или задавать направление на родительских элементах.