我想模仿谷歌的输入法,它会根据你输入的语言自动改变输入法的输入方向。
如何识别用户是在使用 RTL 还是 LTR 语言输入?它必须跨浏览器工作。
我想模仿谷歌的输入法,它会根据你输入的语言自动改变输入法的输入方向。
如何识别用户是在使用 RTL 还是 LTR 语言输入?它必须跨浏览器工作。
您应该使用属性 dir="auto"
例如
<html dir="auto">
这样,浏览器将查看第一个强类型字符并自动调整文本。
作为参考,这里是 W3C 文档:http ://www.w3.org/International/tutorials/new-bidi-xhtml/qa-html-dir
如果你想模仿谷歌的方向性识别算法,你需要听输入变化,识别插入的字符是 RTL 还是 LTR(或中性)并dir=""
相应地更改文本框的属性。
在大多数情况下,Google 的算法似乎计算了字符串中的大多数强字符并据此决定方向性。如果您键入 RTL,它会将上下文切换到 RTL,如果您随后为同一段落切换到 LTR,如果这些字符的数量超过 RTL 字符,它可能会再次将上下文切换到 LTR。
相比之下,Facebook 也使用了方向算法,但略有不同——它似乎使用第一个强字符来决定段落的方向,而不是总数。
(作为记录,谷歌似乎也有几种算法;Gmail 的行为与谷歌环聊略有不同,这与谷歌搜索中的输入对齐方式不同。在这些事情中,几乎没有“正确”或“错误” “答案,而是适合您的用例)
无论您选择实施哪种方法,您首先需要识别用户正在输入的内容。有几种方法可以做到这一点,但我会推荐以下方法:
您可以创建一个 JavaScript 方法来侦听用户的输入,使用上面的正则表达式来识别使用了哪个强字符(通过第一个字符或全部计数,以最适合您的使用和规模的方式) - 并更改文本框的dir=""
相应的属性。
确保稍后以正确的对齐方式显示提交的文本,因此您可能必须使用某些东西来存储您选择的对齐方式,或者在渲染时重新识别它。无论哪种方式,不要忘记显示也需要相同的dir=""
属性。
<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…" />
</body>
</html>
为时已晚,但也许有一天它可以帮助某人。该函数将根据第一个输入的字符为输入字段添加方向属性,当用户清除输入文本时,该函数将再次检测文本的新语言。
$.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();