cambia automaticamente la direzione del testo della casella di testo

Question

Quando si passa a Facebook e si desidera lasciare un commento, per quanto riguarda la lingua selezionata per la tastiera, la direzione della casella di testo cambia automaticamente quando si fa clic su di essa per scrivere il commento. Se hai scelto la lingua araba per la tastiera, la casella di testo ottiene automaticamente la direzione RTL. qualche idea su come è stata implementata? Mi piacerebbe usarlo sulla mia applicazione web.

Answer 1

È possibile utilizzare la proprietà CSS direction per raggiungere questo obiettivo:

input{ 
    direction: rtl; 
} 

Aggiornamento

Per modificare la direzione del testo base in modo dinamico sull'input dell'utente è possibile controllare il primo carattere di ingresso per vedere se soddisfa un determinato criterio, in questo caso un'espressione regolare.

$('input').keyup(function(){ 
    $this = $(this); 
    if($this.val().length == 1) 
    { 
     var x = new RegExp("[\x00-\x80]+"); // is ascii 

     //alert(x.test($this.val())); 

     var isAscii = x.test($this.val()); 

     if(isAscii) 
     { 
      $this.css("direction", "ltr"); 
     } 
     else 
     { 
      $this.css("direction", "rtl"); 
     } 
    } 

}); 

Questo è un esempio di base che utilizza ltr direzione per il testo ASCII e rtl per tutto il resto.

Here's a working example.

Answer 2

in HTML5 si può semplicemente fare questo:

<input type="text" dir="auto" /> 

questo cambiare automaticamente la direzione della base di ingresso sul primo carattere. Spero che aiuti.

NOTA:

Modificato: La gente dice che non funziona in IE11.

Answer 3

è meglio rilevare la direzione del testo in base al primo carattere del testo. se il primo appartiene al linguaggio RTL, allora la direzione deve cambiare.

esempio, un testo persiano con la parola inglese al suo interno.

به معنای واقعی stanco هستم

un altro esempio, un paragrafo inglese potrebbe contenere una parola persiana, ma tutto il testo deve essere in LTR.

questa parola viene utilizzata in diverse situazioni. il significato di شیر è ...

questa funzione controllerà il primo carattere digitato in. se appartiene a una lingua RTL, quindi la direzione cambierà. Questo codice supporta tutte le lingue RTL.

function isRTL(str) { 
    var letters = []; 
    allRTL = new RegExp(
    "^[\u0590-\u05fe\u0600-۾܀-ݎݐ-ݾހ-\u07be߀-\u07fe\u0800-\u083e\u0840-\u085e\u08a0-\u08fe\u0900-ॾ]|\ud802[\udf60-\udf7e]+$" 
); 
    var cursor = 1; 
    for (var i = 0; i <= cursor; i++) { 
    letters[i] = str.substring(i - 1, i); 
    if(/\s/.test(letters[i])) { 
     cursor++; 
    } 
    if (allRTL.test(letters[i])) { 
     return true; 
    } 
    } 
    return false; 
} 
var dir = $("input[type=text]"); 
dir.keyup(function(e) { 
    if (isRTL(dir.val())) { 
    $(this).css("direction", "rtl"); 
    } else { 
    $(this).css("direction", "ltr"); 
    } 
}); 

per ulteriori informazioni visitare questo codepen.