blocks|key|557140|text|function+rtl(element)
{+++
++++if(element.setSelectionRange){
++++++++element.setSelectionRange(0,0);
++++}
}




<input+type="text"+name="textbox"+style="direction:RTL;"+onkeyup="rtl(this);"/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|557141|这段代码就行了。|unstyled|557142|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>function rtl(element)
{ 
 if(element.setSelectionRange){
 element.setSelectionRange(0,0);
 }
}




&lt;input type="text" name="textbox" style="direction:RTL;" onkeyup="rtl(this);"/&gt;
</code></pre>

This code will do.

blocks|key|557207|text|仅使用direction:RTL，在系统设置中切换到正确的键盘(例如阿拉伯语)时，新添加的字符将正确地附加到左侧。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|557208|entityMap^0|3|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Use only <code>direction:RTL</code> and when switched to a proper keyboard (e.g. Arabic) in the system settings, the newly added characters will correctly be appended to the left.

blocks|key|557262|text|您可以在输入上使用dir="rtl“。是受支持的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|557263|<input+dir="rtl"+id="foo"/>|code-block|syntax|javascript|557264|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use the dir="rtl" on the input. It is supported.

<pre><code>&lt;input dir="rtl" id="foo"/&gt;
</code></pre>

blocks|key|557281|text|在css中的输入上使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|557282|input+{
++unicode-bidi:bidi-override;
++direction:+RTL;
}|code-block|syntax|javascript|557283|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use on the input in css.

<pre><code>input {
 unicode-bidi:bidi-override;
 direction: RTL;
}
</code></pre>

blocks|key|773747|text|除了方向:+rtl之外，特定于角度材质的一个特征是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|773748|.mat-form-field+{
+++text-align:+start!important;
+}|code-block|syntax|javascript|773749|这对RLT和LTR都有效|773750|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

A feature specific to Angular Material, in addition to direction: rtl, is :

<pre><code>.mat-form-field {
 text-align: start!important;
 }
</code></pre>

This will work for both RLT &amp; LTR

blocks|key|773775|text|它适用于Chrome浏览器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|773776|使用div元素并使其可编辑。|773777|++++<div+contenteditable="true">
++++</div>|code-block|syntax|javascript|773778|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

It works for Chrome browser. 
Use a div element and make it editable.

<pre><code> &lt;div contenteditable="true"&gt;
 &lt;/div&gt;
</code></pre>

blocks|key|773806|text|只需使用此CSS，这将更改您的文本域和光标位置从右到左。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|773807|input,+textarea+{+
+unicode-bidi:bidi-override;+
+direction:+RTL;+
}|code-block|syntax|javascript|773808|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simply use this CSS, this will change your text field and cursor position from right to left.

<pre><code>input, textarea { 
 unicode-bidi:bidi-override; 
 direction: RTL; 
}
</code></pre>

blocks|key|557413|text|一种更好、更用户友好的方法是将dir属性设置为auto。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|557414|<input+dir="rtl"+id="foo"/>|code-block|syntax|javascript|557415|这样，如果用户输入英文文本，它将左对齐，如果他输入阿拉伯文本，它将自动右对齐|557416|有关dir属性的详细信息，请参见here|557417|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir^0|F|3|N|4|0|0|0|2|3|G|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

A better, more user-friendly way to do this is to set the <code>dir</code> attribute to <code>auto</code>.
<pre><code>&lt;input dir=&quot;rtl&quot; id=&quot;foo&quot;/&gt;
</code></pre>
This way if a user enters English text it will be left-aligned and if he enters Arabic text it will be right-aligned automatically
See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir" rel="nofollow noreferrer">here</a> for more information on the <code>dir</code> attribute

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 

<pre><code>text-align:right
</code></pre>

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 

<pre><code>direction:RTL
</code></pre>

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., <a href="http://www.google.com/webhp?hl=ar" rel="noreferrer">http://www.google.com/webhp?hl=ar</a>

Right to left Text HTML input

对于我的网站，我需要提供阿拉伯语支持。它的一部分是提供输入文本框，当用户键入时，新字符必须追加到左侧，文本必须右对齐。将css属性设置为text-align:right没有起作用，因为我不能让光标移到左边并在那里添加字母。因此我删除了该属性并添加了direction:RTL在这里，光标向左移动，文本右对齐。但是新添加的...

问从右到左的文本HTML输入
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从右到左的文本HTML输入EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从右到左的文本HTML输入
EN