text_input: Placeholder keeps RTL while only change input to be LTR - html

Question

The text-input now is RTL(both placeholder and the input). The attributes were set at some where else.
My question is how can I make a change that only changes the input to be LTR, while the placeholder remains RTL.
Example:
Initially, the text box is like
When it gets focus, the input should be LTR. Because the URL is LTR.
If user didn't type anything and the box lost focus, the placeholder should show up and keep RTL.
Can anyone help me with this? Thanks.

Answer 1

You can use this code.
//jQuery
(function($) {
$.fn.dir_auto = function() {
var selector = '.inputs-nyn[dir="auto"]';
var sclass = "auto-nyn05";
var ftime = true;
if ( $(selector).length ) {
$(document).on("keyup", selector , function() {
if( ftime || !$(this).val() ){
if( !$(this).val() ){
$(this).addClass(sclass);
ftime = true;
}
else{
$(this).removeClass(sclass);
ftime = false;
}
}
});
}
};
})(jQuery);
$(document).ready(function() {
$.fn.dir_auto();
});
//css
body{
direction: rtl;
}
.inputs-nyn.auto-nyn05[dir="auto"] {
direction: rtl;
}
.inputs-nyn[dir="auto"]::placeholder {
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- HTML -->
<input class="inputs-nyn auto-nyn05" dir="auto" placeholder="متن فارسی..." type="text">

Answer 2

You cannot do that with HTML markup, since the dir attribute sets the basic directionality of all attributes of the element (and the element content, if it has content).
What you can do is to override the basic directionality for an attribute at the character level. This means that you set the element’s directionality to LTR (so that the value will appear that way) but use U+202B RIGHT-TO-LEFT EMBEDDING at the start of the placeholder value and U+202C POP DIRECTIONAL FORMATTING at its end. This will make it an “RTL island”. E.g.,
<input ... dir=ltr placeholder="‫...‬">
Unfortunately, the placeholder text will then appear as left-aligned (due to the element’s directionality). But the directionality of that text will be RTL.