text_input：占位符保持 RTL，而仅将输入更改为 LTR答案

【问题标题】：text_input: Placeholder keeps RTL while only change input to be LTRtext_input：占位符保持 RTL，而仅将输入更改为 LTR
【发布时间】：2014-09-18 09:08:28
【问题描述】：

文本输入现在是 RTL（占位符和输入）。属性设置在其他地方。我的问题是如何进行更改，仅将输入更改为 LTR，而占位符仍然是 RTL。

示例：最初，文本框就像

当它获得焦点时，输入应该是 LTR。因为 URL 是 LTR。

如果用户没有输入任何内容并且框失去焦点，则应该显示占位符并保持 RTL。

谁能帮我解决这个问题？谢谢。

【问题讨论】：

stackoverflow.com/questions/6729837/…

标签： html placeholder

【解决方案1】：

您可以使用此代码。

//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">

【讨论】：

【解决方案2】：

您不能使用 HTML 标记来做到这一点，因为 dir attribute 设置元素的所有属性（以及元素内容，如果它有内容）的基本方向。

您可以做的是在角色级别覆盖属性的基本方向性。这意味着您将元素的方向性设置为 LTR（以便值以这种方式显示），但在占位符值的开头使用 U+202B RIGHT-TO-LEFT EMBEDDING 并在其末尾使用 U+202C POP DIRECTIONAL FORMATTING。这将使它成为一个“RTL 岛”。例如，

<input ... dir=ltr placeholder="&#x202b;...&#x202c;">

不幸的是，占位符文本将显示为左对齐（由于元素的方向性）。但该文本的方向性将是 RTL。

【讨论】：