CSS: элемент ввода rtl со вставкой ltr

Я использовал направление rtl (для персидского языка) в теге html для всего документа. Но у меня есть элемент ввода для имени пользователя или адреса электронной почты (как вы знаете, это английский и должен быть ltr). Я google и нашел некоторый скрипт для автоматического направления. Они работали, но если у меня есть rtl placeholder для ввода, текст заполнитель также будет ltr!
Можете ли вы мне посоветовать?
Я хочу что-то вроде этого:
[пример]: http://sumdroid.pe.hu/sample.jpg «смотрите это изображение»CSS: элемент ввода rtl со вставкой ltr

весь документ РТЛ, заполнитель РТЛ, но элемент ввода вставка л.

источник

2016-01-20 Parsa

Использование браузера конкретные псевдо вызовы в заполнитель должен сортировать вопрос из

input[type="text"]:-moz-placeholder { 
    text-align: right; 
} 
input[type="text"]:-ms-input-placeholder { 
    text-align: right; 
} 
input[type="text"]::-webkit-input-placeholder { 
    text-align: right; 
} 

.input{ 
direction: rtl; 
} 

.input:focus{ 
    text-align: left; 
    direction: ltr; 
}

источник

2016-01-20 08:50:17 Stewartside

Я думаю, он хочет, чтобы они выровнялись по правому краю - но это было хорошее решение. – Aravona

спасибо. Но псевдокод css эффективен и решает проблему. Остальные стили не нужны и с этим кодом, результат будет другим, а не тем, что я хочу (как показано на прилагаемом изображении) – Parsa

Вы можете использовать этот способ:

HTML

<input class="input" type="text" value="رمزعبور" name="" id="" onfocus="if (this.value == 'رمزعبور') {this.value = '';}" onblur="if (this.value == '') {this.value = 'رمزعبور';}"/>

CSS

.input{ 
    direction: rtl; 
} 
.input:focus{ 
    text-align: left; 
    direction: ltr; 
}

Демо-версия: http://codepen.io/mehrabi/pen/yePmEZ

источник

2016-01-20 08:53:42 coderman

спасибо. Это сложное решение. Но я имею в виду использование placeholder, не используя значение в качестве заполнителя. – Parsa

CSS: элемент ввода rtl со вставкой ltr

ответ

Смежные вопросы