如何從選項框，textarea更改爲ltr-rtl並從右向左書寫？

Question

我如何將文本框方向從選項框，從正常的「ltr」更改爲「rtl」，因此它也從右向左寫入，例如，當我選擇語言「Pashto，Arabic或Hebrew」選項，如果沒有選擇阿拉伯語，textarea與「ltr」是正常的。

請不要誤解的問題。我不問如何在css中創建ltr和rtl，我在問如何通過使用選項框來改變texteara的方向。

注：我知道有對「阿拉伯」一些自動的解決方案，但這種解決方案需要從因爲語言，例如「普什圖語」選項使用相同的拉丁字母作爲歐洲的做法，但它與阿拉伯語或希伯來語相同。這就是爲什麼它不能自動生成，但在選項菜單中選擇這些語言時需要激活。

應該從「LTR到RTL」，並在同一時間將變更爲「書寫從右到左」。

一旦在選項框中選擇指定的語言，它需要做的是改變textarea的方向以及打字的方向。

的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

您可以撥打onchange事件的選擇功能，然後獲得所選選項的值。如果它是阿拉伯語或普什圖語或亞美尼亞語。將textbox的style.direction更改爲rtl，否則更改爲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>