Question

在我的html页面中，我需要让我的文本输入接受一组特定的字母。我这样做是通过捕获keypressed事件并检查输入的字符是否有效。

这些允许的字符都取自从左到右书写的英语，以及从右到左书写的其他一些语言。输入的每个单词可以是英语和阿拉伯语，希伯来语字母的混合。

我需要让文本框显示从右到左书写的文本（希伯来语或阿拉伯语的相同行为适用于英语） - 例如，如果我写下来 -

A

B

א

ב

C

d

ý

我希望从右到左按顺序显示它。

设置"style:dir=rtl"并没有解决它，它只是呈现要从右到左书写的文本，但实际上并没有改变我需要的英文字符的顺序。

rtl结果是：

乙

A

א

ב

ý

d

C

最好的方法是什么？

编辑：

这似乎解决了我的问题：Right to left Text HTML input 虽然解决方案没有按照我希望得到的细节解释。

Answer 1

将文本框样式设置为：

style="direction:rtl; unicode-bidi:bidi-override;"

为什么？

如果您只是设置方向性（使用direction: rtl），那么在该长文本中仍然会有单独的“定向运行”，每个文本都有自己的渲染行为。 “AB”部分是一个从左到右的运行，这就是为什么你看到它呈现为一个英文单词，其中B在A的右边。

添加unicode-bidi: bidi-override告诉浏览器忘记这些单独的运行，只是从右到左依次渲染所有字符。

[已添加以使用数据解决潜在客户端应用程序]

对于使用此数据的客户端应用程序，您可以提供字符串本身，这将迫使他们正确显示它，即使这些客户端应用程序不受您的控制。

假设客户端应用程序使用某种API或某种服务访问数据（意味着您不允许他们直接访问您的数据库），那么您可以将一个名为Right-to-Left Override（RLO）的Unicode控制字符添加到字符串的开头，然后发送给客户端。

RLO字符代码为\u202E，因此按照上面的示例，您将返回到客户端的结果字符串为：

\ u202E

A

乙

א

ב

C

d

ý

大多数Web浏览器和操作系统都遵循BiDi控制字符并应用正确的BiDi渲染逻辑。因此，当客户端应用程序将该字符串输出到UI时，底层呈现引擎应该按照您的意图显示字符串。

注意：将十六进制代码的unicode字符添加到字符串可能会有所不同，具体取决于您的平台和编程语言。

Answer 2

您可以使用js

执行此操作

<div id="id_of_content"></div>

<script type="text/javascript">
        // if updating the div in realtime then try using keypress listener to call this function
        function(id_of_content) {
            var text = $('#'+id_of_content).text();
            var words = text.split(' ');
            var result = '';
            for(var j=0;j<words.length;j++) {
                if(/[^a-zA-Z]/.test(words[j])) {
                    var temp = words[j];
                    var rev_word = '';
                    for(var i=0;i<temp.length;i++) {
                        rev_word += temp[temp.length-i-1]
                    }
                result += rev_word;
                }
                else {
                    result += words[j];
                }
            }
        $('#'+id_of_content).text(result);
       }
</script>

希望这会有所帮助

Answer 3

好吧，我正在浏览一些与RTL相关的博客和样本，并提出了以下工作样本。

在此代码切换选项中，您可以点击此按钮同时尝试LTR和RTL-

JSfiddle：http://jsfiddle.net/vikash2402/ammajhy3/3/

以下是它的工作代码。

<?php
$login='test';
$password='test';
$xml_data =file_get_contents(realpath('case.xml'));
$url ='mega_url';
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch,CURLOPT_HEADER,true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/xml'));
curl_setopt($ch, CURLOPT_POSTFIELDS, $xml_data);
curl_setopt($ch, CURLOPT_USERPWD, "$login:$password");
$output = curl_exec($ch);

// Jquery, BS3 & Awesome
$('#rtl-button').click(

function () {
    var src = 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.min.css';
    if ($(this).attr('data-direction') == 'ltr') {
        $('head').append('<link href=' + src + ' rel="stylesheet" id="bootstrap-rtl" />');
        $(this).attr('data-direction', 'rtl');
    } else { // by default we load bootstrap-rtl 
        $('head link[href="' + src + '"]').remove();
        $(this).attr('data-direction', 'ltr');
    }
});

希望这会对您有所帮助：）

Answer 4

你可以使用这个功能

function reverseLTR(text) {
    var ltrChars = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF' + '\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF';
    var r = new RegExp("[" + ltrChars + "]?", 'g');
    var ltrMatches = text.match(r);
    var arr = [];
    var insertPlace=0;
    for (var i = 0; i < text.length; i++) {
        if (!ltrMatches[i].length) {//its rtl character
            arr.splice(i, 0, text[i]);
            insertPlace=i+1;
        }
        else arr.splice(insertPlace, 0, text[i]);
    }
    return arr.join("");
}
var text="ABאבCDY";
document.body.innerHTML=text+" converted to : "+reverseLTR(text);

Answer 5

试用<bdo>代码

<p>left-to-right.</p>

结果：从左到右。

<p><bdo dir="rtl">right-to-left.</bdo></p>

结果：.tfel-ot-thgir

将从左到右的语言写成从右到左的html

5 个答案: