Question

我想模仿谷歌的输入，它会根据您输入的语言自动更改输入的输入方向。

如何识别用户是否输入RTL或LTR语言？它必须跨浏览器工作。

Answer 1

您应该使用属性dir =“auto”

e.g。

<html dir="auto">

这样浏览器将查看第一个强类型字符并自动调整文本。

供参考，以下是W3C文档：http://www.w3.org/International/tutorials/new-bidi-xhtml/qa-html-dir

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    
    <head>
    
        <script> 
            function checkRTL(s) {
                var ltrChars = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF' + '\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF',
                    rtlChars = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC',
                    rtlDirCheck = new RegExp('^[^' + ltrChars + ']*[' + rtlChars + ']');
    
                return rtlDirCheck.test(s);
            };
    
            // BIND KEYPRESS
            var input = $('input').on('keypress', keypress)[0];
    
            function keypress(e) {
                // need to wait for the character
                setTimeout(function () {
                    var isRTL = checkRTL(String.fromCharCode(e.charCode)),
                        dir = isRTL ? 'RTL' : 'LTR';
    
                    input.style.direction = dir;
                }, 0);
            }
        </script>
    
    </head>
    
    </body>
    
        <h1>Auto Direction
            <sup>(RTL | LTR)</sup>
        </h1>
        <input type="text" onkeypress="keypress()" placeholder="Type something&hellip;" />
    
    </body>
    
    </html>

Answer 3

如果您想模仿Google的方向性识别算法，则需要听取输入更改，识别插入的字符是RTL还是LTR（或中性）并更改文本框{{1相应的属性。

在大多数情况下，谷歌的算法似乎计算字符串中的大多数强字符，并从中决定方向性。如果你键入RTL它会将上下文切换到RTL，如果然后切换到相同段落的LTR，它可能会再次将上下文切换到LTR，如果这些字符超过RTL的那些。

为了比较，Facebook也使用方向算法，但它略有不同 - 它似乎使用第一个强字符来决定段落的方向而不是整体数字。

（为了记录，谷歌似乎还有几种算法; Gmail的行为与谷歌环聊略有不同，这与谷歌搜索输入的调整方式不同。在这些事情中，大多数都没有＆＃34 ;对＆＃34;或＆＃34;错误＆＃34;答案，但更适合您的用例）

无论您选择实施哪种方法，首先需要确定用户输入的内容。有几种方法可以做到这一点，但我建议如下：

阅读一些关于Unicode双向算法的内容（特别是关于＆＃34;强大的＆＃34;类型字符）http://unicode.org/reports/tr9/
找到一种在上下文中识别强字符的好方法。可以在MediaWiki的语言文件中找到正则表达式的示例（其中组1是LTR，组2是RTL）：https://github.com/wikimedia/mediawiki/blob/6f19bac69546b8a5cc06f91a81e364bf905dee7f/languages/Language.php#L174

您可以创建一个侦听用户输入的JavaScript方法，使用上面的正则表达式来识别使用哪个强字符（通过第一个字符或全部计算，最适合您的使用和缩放） - 并相应地更改文本框的dir=""属性。

确保稍后以正确的对齐方式显示提交的文本，因此您可能必须使用某些内容来存储您选择的对齐方式，或者在渲染时重新识别它。无论哪种方式，都不要忘记显示器也需要相同的dir=""属性。

Answer 4

为时已晚，但也许有一天可以对某人有所帮助。该功能将根据输入的第一个字符向输入字段添加方向属性，当用户清除输入文本时，该功能将再次检测新的文本语言。

$.fn.Set_Input_Direction = function()
{
    $(this).off('keypress').on('keypress',function(e){
        _This = $(this);
        setTimeout(function()
        {
            if(_This.val().length > 1)
            {
                return;
            }
            else
            {
                var RTL_Regex = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
                var isRTL     = RTL_Regex.test(String.fromCharCode(e.which));
                var Direction = isRTL ? 'rtl' : 'ltr';
                _This.css({'direction' : Direction});
            }
        });
    });
};

要使用它：

$('input').Set_Input_Direction();

如何识别用户是否使用RTL或LTR语言输入？

4 个答案: