例如,在Facebook上,如果你为键盘选择了阿拉伯语,文本框会自动获得RTL方向。我如何在我的Web应用程序上实现它?我不知道使用的方法或属性。
2hh7jdfx1#
您可以使用CSS direction属性来实现此目的:
direction
input{ direction: rtl; }
更新
要根据用户输入动态地更改文本的方向,可以检查输入的第一个字符,看看它是否满足给定的条件,在本例中是正则表达式。
$('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"); } } });
这是一个基本的例子,使用ltr方向为ascii文本和rtl为其他一切。Here's a working example.
ltr
rtl
w51jfk4q2#
在HTML5中,您可以简单地执行以下操作:
<input type="text" dir="auto" />
这会根据第一个字符自动改变输入方向。希望有帮助。注:编辑:人们说它在IE11中不起作用。
ujv3wf0j3#
最好根据文本的第一个字符来检测文本方向。如果第一个字符属于RTL语言,则方向必须改变。例如,波斯语文本中有英语单词。工作另一个例子,英语段落可能包含一个波斯语单词,但整个文本必须是LTR。这个词在不同的场合下使用。这个函数将检查输入的第一个字符。2如果它属于RTL语言,那么方向将改变。3这个代码支持所有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"); } });
欲了解更多信息,请访问此codepen。
0yycz8jy4#
对于输入元素,可以使用Unicode内在方向
input { text-align: start; unicode-bidi: plaintext; }
当然,它可以与其他元素一起工作,比如div,contenteditable如注解中提到的那样为真。
contenteditable
bweufnob5#
免责声明如@bool3max所述:许多语言都使用Unicode字符,并被写成LTR。您的函数为所有非ASCII字符设置direction: rtl,这是不希望的。
direction: rtl
我也发现了一个Pen,它在没有正则表达式的情况下也能做同样的事情。我稍微调整了一下代码,使其兼容多个输入字段和文本区域。它的目的是在以下两个区域之间使用它:例如,EN和AR语言。
$('input[type="text"], textarea').each(function () { $(this).on('input keyup keypress', function () { if (isUnicode($(this).val())) { $(this).css('direction', 'rtl'); } else { $(this).css('direction', 'ltr'); } }); }); function isUnicode(str) { var letters = []; for (var i = 0; i <= str.length; i++) { letters[i] = str.substring((i - 1), i); if (letters[i].charCodeAt() > 255) { return true; } } return false; }
5条答案
按热度按时间2hh7jdfx1#
您可以使用CSS
direction
属性来实现此目的:更新
要根据用户输入动态地更改文本的方向,可以检查输入的第一个字符,看看它是否满足给定的条件,在本例中是正则表达式。
这是一个基本的例子,使用
ltr
方向为ascii文本和rtl
为其他一切。Here's a working example.
w51jfk4q2#
在HTML5中,您可以简单地执行以下操作:
这会根据第一个字符自动改变输入方向。希望有帮助。
注:
编辑:人们说它在IE11中不起作用。
ujv3wf0j3#
最好根据文本的第一个字符来检测文本方向。如果第一个字符属于RTL语言,则方向必须改变。
例如,波斯语文本中有英语单词。
工作
另一个例子,英语段落可能包含一个波斯语单词,但整个文本必须是LTR。
这个词在不同的场合下使用。
这个函数将检查输入的第一个字符。2如果它属于RTL语言,那么方向将改变。3这个代码支持所有RTL语言。
欲了解更多信息,请访问此codepen。
0yycz8jy4#
对于输入元素,可以使用Unicode内在方向
当然,它可以与其他元素一起工作,比如div,
contenteditable
如注解中提到的那样为真。bweufnob5#
免责声明如@bool3max所述:许多语言都使用Unicode字符,并被写成LTR。您的函数为所有非ASCII字符设置
direction: rtl
,这是不希望的。我也发现了一个Pen,它在没有正则表达式的情况下也能做同样的事情。我稍微调整了一下代码,使其兼容多个输入字段和文本区域。它的目的是在以下两个区域之间使用它:例如,EN和AR语言。