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

Question

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

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

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

它应该从“ltr 到 rtl”同时变成“从右到左书写”。

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

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 事件上调用该函数，然后获取所选选项的值。如果是阿拉伯语、普什图语或亚美尼亚语。将文本框的 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>