2011-10-14 16 views
14

Po przejściu do serwisu Facebook i pozostawieniu komentarza, w odniesieniu do wybranego języka dla klawiatury, kierunek pola tekstowego zmienia się automatycznie po kliknięciu w niego w celu napisania komentarza. Jeśli wybrałeś język arabski dla swojej klawiatury, pole tekstowe automatycznie otrzyma kierunek RTL. jakikolwiek pomysł, w jaki sposób został wdrożony? Chciałbym go użyć w mojej aplikacji internetowej.automatycznie zmienia kierunek tekstu w polu tekstowym

+0

Zobacz odpowiedź - http://stackoverflow.com/a/14824756/104380 – vsync

Odpowiedz

25

Można użyć właściwości CSS direction do osiągnięcia tego celu:

input{ 
    direction: rtl; 
} 

Aktualizacja

Aby zmienić kierunek tekstu dynamicznie w oparciu o dane wprowadzone przez użytkownika można sprawdzić pierwszy znak wejścia aby sprawdzić, czy spełnia on określone kryteria, w tym przypadku wyrażenie regularne.

$('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"); 
     } 
    } 

}); 

Jest to prosty przykład, który używa ltr kierunek tekstu ASCII i rtl do wszystkiego innego.

Here's a working example.

+0

Dziękuję, Tak, wiem, ale kierunek będzie rtl zawsze. to, czego chcę, to kiedy piszesz pierwszy znak, jeśli jest to angielski znak, to wejście dostaje kierunek lrt, a jeśli piszesz arabski lub hebrajski, zmienia się automatycznie na rtl. – user217648

+0

dzięki.ale nie działa we wszystkich językach wymiany na klawiaturze –

+0

To rozwiązanie jest bardzo dobre. +1 ...! Jut ma mały problem. Kiedy naciskam '', ten kod myśli, że jest ascii i zmienia kierunek na 'ltr'. Jak mogę to naprawić? – stack

17

w HTML5 można po prostu to zrobić:

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

to automatycznie zmieni kierunek podstawy wejściowego na pierwszy znak. Mam nadzieję, że to pomaga.

UWAGA:

Zmieniano: Ludzie mówią, że to nie działa w IE11.

+1

To nie jest obsługiwane w IE 11 – Mohebifar

+0

to jest bardzo dobrze, ale jak mogę poznać kierunek tekstu po stronie serwera – Ebrahim

1

najlepiej wykrywać kierunek tekstu na podstawie pierwszego znaku tekstu. jeśli pierwszy należy do języka RTL, kierunek musi się zmienić.

przykład, perski tekst z angielskim wyrazem w nim.

به معنای واقعی zmęczony هستم

innym przykładzie, ustęp angielski może zawierać perskiego słowa, ale cały tekst musi być w LTR.

to słowo jest używane w różnych sytuacjach. znaczenie شیر to ...

ta funkcja sprawdzi pierwszy wpisany znak. jeśli należy do języka RTL, kierunek zmieni się. Ten kod obsługuje wszystkie języki 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"); 
    } 
}); 

, aby uzyskać więcej informacji, odwiedź ten codepen.

Powiązane problemy