如何从选项框、textarea 更改为 ltr-rtl 以及从右向左书写？

Question

如何从选项框更改文本区域的方向，从正常的"ltr"到"rtl"所以它也从右到左书写，例如，当我在选项中选择语言 "Pashto, Arabic or Hebrew" 时，如果未选择阿拉伯语，则文本区域正常 "ltr".

请不要误解问题。我不是在问如何在 css 中制作 ltr 和 rtl，我是在问如何通过使用选项框使 texteara 改变方向。

注意： 我知道 "Arabic" 有一些自动解决方案，但是这个解决方案需要来自选项，因为语言例如 "Pashto" 使用与欧洲相同的拉丁字母表，但书写方向与阿拉伯语或希伯来语相同。这就是为什么它不能自动设置，但需要在选项菜单中选择这些语言时激活它。

应该从"ltr to rtl"同时变成"writing right to left"。

一旦在选项框中选择了指定的语言，需要做的就是改变文本区域的方向以及打字的方向。

JavaScript（我知道这个 JavaScript 这次可能是 100% 错误的，所以请继续给我你自己完全不同的 JavaScript解)

<script type='text/javascript'>
function setRtL(e) {
    if (e.key == " ") {
        var textbox = document.getElementById("SeekBox");
        textbox.value += "\u200F";
    }
}
</script>

<textarea name="u" cols="74" rows="7" wrap="physical" id="SeekBox" style="resize:none; direction: ltr"></textarea>


<select name="LangF" class="OBSMatch" id="opt">
  <option value="" disabled>Common Languages:</option>
  <option value="zh-CN">Chinese (Simplified)</option>
  <option selected value="en">English</option>
  <option value="fr">French</option>
  <option value="de">German</option>
  <option value="ru">Russian</option>
  <option value="es">Spanish</option>
  <option value="" disabled>&#8212;</option>
  <option value="auto">Auto Detect</option>
  <option value="" disabled>&#8212;</option>
  <option value="" disabled>Other Languages:</option>
  <option value="sq">Albanian</option>
  <option value="ar" onkeydown="setRtL(event)">Arabic</option>
  <option value="ps" onkeydown="setRtL(event)">Pashto</option>
  <option value="iw" onkeydown="setRtL(event)">Hebrew</option>
  <option value="hy">Armenian</option>
  <option value="ro">Romanian</option>
</select>

<input type="button" id="SwitchLang" value=" Swap &#9650;&#9660; Language ">

<select name="LangT" class="OBSMatch" id="opt">
  <option value="" disabled>Common Languages:</option>
  <option value="zh-CN">Chinese (Simplified)</option>
  <option value="en">English</option>
  <option selected value="fr">French</option>
  <option value="de">German</option>
  <option value="ru">Russian</option>
  <option value="es">Spanish</option>
  <option value="" disabled>&#8212;</option>
  <option value="auto">Auto Detect</option>
  <option value="" disabled>&#8212;</option>
  <option value="" disabled>Other Languages:</option>
  <option value="sq">Albanian</option>
  <option value="ar" onkeydown="setRtL(event)">Arabic</option>
  <option value="ps" onkeydown="setRtL(event)">Pashto</option>
  <option value="iw" onkeydown="setRtL(event)">Hebrew</option>
  <option value="hy">Armenian</option>
  <option value="ro">Romanian</option>
</select>

写"rtl"时是从右往左写，但是新字符出现在左边而不是正常的"rtl"出现在右边。

示例：认为我们在左侧写英文，在右侧显示新文本...

示例： 在阿拉伯语中，您在右侧书写，文本出现在新的左侧...

解释：想想你是如何用英语写作的。在英语中，您从左到右书写，所有接下来的文字都会出现在您文字的右侧。现在，如果我们反转它，你从右到左，所有新文本都应该出现在文本的左侧。

但是单独使用 "rtl" 只能使它从右到左出现，新文本出现在右侧而不是左侧，这就是为什么单独使用 "rtl" 不能正常工作并且需要更多完成。

Answer 1

您可以在 select 的 onchange 事件上调用该函数，然后获取 selected 选项的值。如果是阿拉伯语、普什图语或亚美尼亚语。将文本框的 style.direction 更改为 rtl，否则更改为 ltr。这样的事情似乎有效：

所以每次从 'ltr' 更改为 'rtl' 或相反时，您都需要反转文本框中的值。在 'rtl' 模式下，您必须在字符串的开头添加新字符，而在删除文本时，您必须从开头删除字符，为此您可以检查文本框的 oninput 事件。

<textarea name="u" cols="74" rows="7" wrap="physical" id="SeekBox" style="resize:none; direction: ltr" oninput="correctTextDirection(this)"></textarea>

<select name="LangF" class="OBSMatch" id="opt" onchange="setRtL(this)">
  <option value="" disabled>Common Languages:</option>
  <option value="zh-CN">Chinese (Simplified)</option>
  <option selected value="en">English</option>
  <option value="fr">French</option>
  <option value="de">German</option>
  <option value="ru">Russian</option>
  <option value="es">Spanish</option>
  <option value="" disabled>&#8212;</option>
  <option value="auto">Auto Detect</option>
  <option value="" disabled>&#8212;</option>
  <option value="" disabled>Other Languages:</option>
  <option value="sq">Albanian</option>
  <option value="ar" >Arabic</option>
  <option value="ps">Pashto</option>
  <option value="iw">Hebrew</option>
  <option value="hy">Armenian</option>
  <option value="ro">Romanian</option>
</select>

<script type='text/javascript'>
var prevText = document.getElementById("SeekBox").value;
function setRtL(obj) {
    var textbox = document.getElementById("SeekBox");
    var text = textbox.value;
    if(["ar","ps","iw"].indexOf(obj.value) >=0){
       if(textbox.style.direction === "ltr")
           textbox.value = text.split("").reverse().join("");
       textbox.style.direction =  "rtl";
    }else{
       if(textbox.style.direction === "rtl")
           textbox.value = text.split("").reverse().join("");
       textbox.style.direction =  "ltr";
    }
}
function correctTextDirection(obj){
if(obj.style.direction === "ltr")
      return;
var currentText = obj.value;
if(currentText.length > prevText.length){
    obj.value = currentText[currentText.length-1] + prevText; 
    prevText = obj.value;
}else if(currentText.length < prevText.length){
    obj.value = prevText.substr(1); 
    prevText = obj.value;
}
}
</script>

如何从选项框、textarea 更改为 ltr-rtl 以及从右向左书写？

How do I change from option box, textarea to ltr-rtl and writing from right to left too?

html

javascript

jquery

textarea

options