thay đổi hướng văn bản của hộp văn bản tự động

Question

Khi bạn truy cập Facebook và muốn để lại nhận xét, liên quan đến ngôn ngữ bạn đã chọn cho bàn phím của mình theo hướng của hộp văn bản tự động thay đổi khi bạn nhấp vào nó để viết bình luận của bạn. Nếu bạn đã chọn ngôn ngữ tiếng Ả Rập cho bàn phím của bạn, hộp văn bản sẽ tự động nhận được hướng RTL. bất kỳ ý tưởng nào về việc nó đã được triển khai như thế nào? Tôi muốn sử dụng nó trên ứng dụng web của mình.

Answer 1

Bạn có thể sử dụng thuộc tính CSS direction để đạt được điều này:

input{ 
    direction: rtl; 
} 

Cập nhật

Để thay đổi hướng của văn bản tự động dựa trên đầu vào người dùng mà bạn có thể kiểm tra các ký tự đầu tiên của đầu vào để xem liệu nó có đáp ứng được các tiêu chí đã cho hay không, trong trường hợp này là một biểu thức chính quy.

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

}); 

Đây là một ví dụ cơ bản có sử dụng ltr hướng cho văn bản ascii và rtl cho mọi thứ khác.

Here's a working example.

Answer 2

Trong HTML5 bạn chỉ có thể làm điều này:

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

này tự động thay đổi theo hướng cơ sở đầu vào ký tự đầu tiên. Hy vọng điều đó sẽ hữu ích.

LƯU Ý:

Đã chỉnh sửa: Mọi người nói rằng nó không hoạt động trong IE11.

Answer 3

cách tốt nhất để phát hiện hướng văn bản dựa trên ký tự đầu tiên của văn bản. nếu cái đầu tiên thuộc về ngôn ngữ RTL, thì hướng phải thay đổi.

ví dụ, văn bản tiếng Ba Tư có từ tiếng Anh trong đó.

به معنای واقعی mệt mỏi هستم

ví dụ khác, một đoạn tiếng Anh có thể chứa một từ Ba Tư nhưng toàn bộ văn bản có được trong LTR.

từ này được sử dụng trong các tình huống khác nhau. ý nghĩa của شیر là ...

chức năng này sẽ kiểm tra ký tự đầu tiên được nhập. nếu thuộc về ngôn ngữ RTL thì hướng sẽ thay đổi. Mã này hỗ trợ tất cả các ngôn ngữ 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"); 
    } 
}); 

để biết thêm thông tin, truy cập codepen này.