更改语言后更改文本对齐方式

Question

我有一个 HTML 中的文本区域，就像这样：

<textarea name="tx1" style="direction:ltr;"></textarea>

现在，当用户切换到阿拉伯语时，我想要更改输入文本的方向或对齐方式。 不需要任何问题、按钮或提交，我想知道用户在输入时所使用的语言。如果用户使用阿拉伯语，则将文本区域设置为右对齐；如果使用英语，则将其设置为左对齐。

- Amir Parsa KHademi

---

你必须从服务器端设置这个。 - giannisf

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Amir Parsa KHademi

我可以使用像PHP这样的服务器端语言，但我不知道如何或为什么使用它。 - Amir Parsa KHademi

对于输入的每个文本内容 - Amir Parsa KHademi

Answer 1

你可以仅通过CSS实现它：

textarea{
   text-align: start;
   unicode-bidi: plaintext;
}

演示

这个解决方案适用于Chrome和火狐浏览器，但不适用于微软Edge浏览器。

- Nasser Sadraee

---

我找到的最实用的答案。非常感谢你。 - M.Z.

Answer 2

我能想到的唯一方法是检查文本区域的值。

var arabicPattern = /[\u0600-\u06FF]/;

$('#text').bind('input propertychange', function(ev) {

    var text = ev.target.value;

    if (arabicPattern.test(text)) {
        // arabic;
        $('#text').css('direction', 'rtl')

    }


});

但仅检查阿拉伯语不足以满足需求。您必须检查每一种从右到左书写的脚本

工作示例

- giannisf

---

哇！它运行了！你能解释一下第一行（阿拉伯模式）吗？ - Amir Parsa KHademi

它检查字符是否在阿拉伯Unicode范围内。请查看此链接http://en.wikipedia.org/wiki/Arabic_%28Unicode_block%29。 - giannisf

Answer 3

如果您不告诉我们如何更改用户语言，我们无法提供帮助。我想您将不得不使用超文本预处理器（如PHP）或在两种语言中复制页面。

如果您对我所说的一无所知，我可以为您适应使用jQuery。然而，如果您不做任何其他预处理类型的操作，这并不是一个好的实践。

var isArabic = false;
if (isArabic) {
    $("textarea").css("direction", "rtl");
}

如果您使用PHP，可以将用户语言存储在会话数组中，每当用户更改语言时，更改变量，以便预处理HTML，使其显示RTL。

编辑

我刚刚理解了您想要问什么。

明白了：

var language;
$('#element').keypress(function() {
    language = window.navigator.userLanguage || window.navigator.language;
    if (language=="language_code_using_LTR") {
        $(this).css("direction", "rtl");
    }
});

- user4396006

---

例如，在Facebook Moments中，当您输入英文时，文本对齐在左侧，当您按下Alt + Shift并将语言更改为阿拉伯语时，文本对齐会更改为右侧。 - Amir Parsa KHademi

@AmirParsaKHademi，朋友，你首先要做的是清楚地表达你的问题。当一组按键被按下时，你必须触发一个动作，这与问“我如何改变文本方向”完全不同，这是你应该已经知道的事情。你的问题太笼统了。重新编辑它并更加具体明确。 - user4396006

很明显，如果你使用Facebook，在想要分享某个时刻的时候，如果你输入英文，文本区域的文本对齐方式会自动设置为左对齐，而当你输入阿拉伯语时，它会自动将文本区域的对齐方式设置为右对齐。我希望为我的项目做到这一点。 - Amir Parsa KHademi

我应该分两步完成这个任务。 1- 识别用户何时更改语言类型。2- 更改文本区域的对齐方式。 - Amir Parsa KHademi

@AmirParsaKHademi，你的问题一点也不清楚。虽然你现在已经向我解释了，但我之前并不知道。事实上，我甚至不确定你在问什么。 - user4396006

Answer 4

当语言下拉菜单发生更改时，如果下拉菜单中选定的值为阿拉伯语，则添加类到 body，然后基于该类编写样式。

更改元素的所有属性将导致性能问题，并不建议。谢谢。

示例如下:

body.direction_rtl textarea
{
direction:ltr;
}

"direction_rtl" 你正在从脚本中添加类

提及所有需要从右到左对齐的元素

- Naveen Setty

---

不是这样的。看，当你在Facebook上写一条状态时，Facebook会识别你的语言类型。如果你的语言是英语，文本区域中的文本对齐方式会自动设置为左对齐。如果你的语言是阿拉伯语，文本区域中的文本对齐方式会自动设置为右对齐。我想在我的项目中实现这个功能。谢谢。 - Amir Parsa KHademi