Comment passer de la case d'option, textarea à ltr-rtl et écrire de droite à gauche aussi?

Question

Comment puis-je changer la direction textarea dans la zone d'option, de la normale « ltr » à « rtl » il écrit aussi de droite à gauche aussi, quand par exemple j'ai choisi la langue « pachto, en arabe ou en hébreu » en l'option et si l'arabe n'est pas choisi, la zone de texte est normale avec "ltr".

Veuillez ne pas avoir mal compris la question. Je ne demande pas comment faire ltr et rtl en css, Je demande comment faire changer la direction des textures en utilisant une case d'option.

REMARQUE: Je sais qu'il ya des solutions automatiques pour « arabe », mais cette solution doit être de l'option puisque les langues comme par exemple « pachto » utilise les mêmes alphabets latins comme l'Europe, mais il est écrit dans le même sens que l'arabe ou l'hébreu. C'est pourquoi il ne peut pas être automatique, mais il doit être activé lorsque ces langues sont choisies dans le menu des options.

Il devrait changer de "ltr en rtl" et en même temps en "écriture de droite à gauche".

Ce qu'il faut faire est de changer les directions de la zone de texte et aussi la direction de la frappe, une fois que la langue spécifiée est choisie dans la case d'option.

JavaScript (je sais que ce JavaScript peut être 100% mal cette fois-ci, alors s'il vous plaît allez-y et donnez-moi votre propre solution JavaScript totalement différente)

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

Lors de l'écriture "rtl" vous écrivez de droite à gauche, mais les nouveaux caractères apparaissent sur le côté gauche pas comme dans "rtl" normal sur le côté droit.

Exemple: pense que nous écrivons sur l'anglais sur le côté gauche et les nouvelles lances de texte sur le côté droit ...

Exemple: En arabe vous écrivez sur le côté droit et le texte apparaît sur le nouveau côté gauche ...

EXPLICATION: Pensez à la façon dont vous écrivez en anglais. En anglais, vous écrivez de gauche à droite et tout le texte suivant apparaît sur le côté droit de votre texte. Maintenant, si nous inversons cela et vous obtenez de droite à gauche et tout le nouveau texte devrait apparaître sur le côté gauche de votre texte. Mais "rtl" seul fait que de gauche à droite avec un nouveau texte apparaissant sur le côté droit au lieu de gauche, c'est pourquoi "rtl" seul ne fonctionne pas comme il se doit et plus doit être fait.

Answer 1

vous pouvez appeler la fonction sur onchange événement de sélectionner, puis obtenir la valeur de l'option sélectionnée. si c'est arabe ou pashto ou arménien. changez style.direction de textbox en rtl autrement en ltr. quelque chose comme ça semble fonctionner:

Donc, chaque fois que vous passez de 'ltr' à 'rtl' ou vice versa, vous devez inverser la valeur dans la zone de texte. En mode 'rtl', vous devrez ajouter de nouveaux caractères au début de la chaîne et pendant la suppression du texte, vous devrez supprimer les caractères du début pour cela, vous pouvez vérifier l'événement oninput de la zone de texte.

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