CSS 从右到左文本 HTML 输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7524855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Right to left Text HTML input
提问by Anand
For my website, i need to provide arabic support. Part of it is to provide input textboxes where when user types in, the new characters have to be appended to the left and the text has to be right aligned.
对于我的网站，我需要提供阿拉伯语支持。它的一部分是提供输入文本框，当用户输入时，新字符必须附加到左侧，文本必须右对齐。
setting the css property to
将 css 属性设置为
text-align:right
didn't work, as i could not get the cursor to come to the left and add letters there. So I removed that property and added
没有用，因为我无法将光标移到左边并在那里添加字母。所以我删除了那个属性并添加了
direction:RTL
Here, the cursor came to the left and text was right aligned. but the newly added characters were not getting appended to the left. Instead they were getting appended to the right end only.
在这里，光标移到左侧，文本右对齐。但是新添加的字符没有附加到左侧。相反，它们仅被附加到右端。
How do I fix this? please help..
我该如何解决？请帮忙..
For example, see the google arabic page search box. I need the exact behavior, although not with those fancy keyboard icon etc., http://www.google.com/webhp?hl=ar
例如，查看 google 阿拉伯语页面搜索框。我需要确切的行为，虽然不需要那些花哨的键盘图标等，http://www.google.com/webhp?hl=ar
回答by Saket
Here's what I can think of:
这是我能想到的：
- Use
direction:RTLfor the RIGHT alignment - Write a JavaScript handler attached to the event: "onkeyup", which performs the shifting of the entered character to the LEFT (doing some text processing).
- 使用
direction:RTL的右对齐 - 编写一个附加到事件的 JavaScript 处理程序：“onkeyup”，它执行将输入的字符向左移动（进行一些文本处理）。
回答by Nicholas Mayne
You can use the dir="rtl" on the input. It is supported.
您可以在输入上使用 dir="rtl"。它是支持的。
<input dir="rtl" id="foo"/>
回答by Anshul
function rtl(element)
{
if(element.setSelectionRange){
element.setSelectionRange(0,0);
}
}
<input type="text" name="textbox" style="direction:RTL;" onkeyup="rtl(this);"/>
This code will do.
这段代码就行了。
回答by Martin Gr?ber
Use only direction:RTLand when switched to a proper keyboard (e.g. Arabic) in the system settings, the newly added characters will correctly be appended to the left.
仅使用direction:RTL，当在系统设置中切换到正确的键盘（例如阿拉伯语）时，新添加的字符将正确附加到左侧。
回答by haibnu
Use on the input in css.
在 css 中的输入上使用。
input {
unicode-bidi:bidi-override;
direction: RTL;
}
回答by Qamar Al Zaman Habeek
A feature specific to Angular Material, in addition to direction: rtl, is :
除了方向：rtl 之外，Angular Material 特有的一个特性是：
.mat-form-field {
text-align: start!important;
}
This will work for both RLT & LTR
这将适用于 RLT 和 LTR
回答by Vishesh Kumar
It works for Chrome browser.
Use a div element and make it editable.
它适用于 Chrome 浏览器。
使用 div 元素并使其可编辑。
<div contenteditable="true">
</div>
回答by Deep Bisht
Simply use this CSS, this will change your text field and cursor position from right to left.
只需使用此 CSS，这将从右向左更改您的文本字段和光标位置。
input, textarea {
unicode-bidi:bidi-override;
direction: RTL;
}
