RTL (right-to-left) keyboard navigation in an HTML <TextArea>

I am working with some HTML which contains a <textarea>. Currently, I am testing the input of mixed LTR and RTL-based characters, such as "abcأبجABC".

<div class="mycomment" dir="RTL">
  <form method="get" action="{$self}">
    <input type="hidden" name="Id" value="{$entry}" />
    <textarea name="comment" class="comment开发者_如何学编程area"/></textarea>
    <br />
    <input class="button" type="submit" value="{$postlink}" />
  </form>
</div>

The display of the string is correct when in RTL mode, however, the keyboard navigation is incorrect. Specifically, it does not follow the correct order when going through the English and Arabic string sections.

Any ideas how I might be able to bypass or fix this issue?

Unfortunately, the keyboard navigation is probably "correct" according to the specifications. When attempting to run through mixed-direction words, keyboard shortcuts such as Ctrl+>, to jump from word to word, start changing direction depending on the directionality of the characters under the cursor's current position - rather than treating the entire string as uni-directional from a navigation standpoint.

This is understandable, though, when you consider how the computer needs to interpret all other keystrokes while typing in mixed-mode sentences.

If you start typing LTR characters, you expect them to travel left-to-right (with each subsequent character appearing to the RIGHT of the last). If you start typing RTL characters, however, you expect them to travel right-to-left (with each subsequent character appearing to the LEFT of the last).

Think of it this way:

Ctrl+> doesn't mean "go right one word" - it means "go to the next word". In an RTL environment, the next word is to the left - so the keyboard jumps you that direction.

Next, in essence, relates to the order in which bytes are held in memory, rather than relating to the order in which characters are displayed on the screen. Whether a word starts on the right or left of the screen, the characters are held sequentially in memory, starting with the beginning of the word, and ending with the end of the word.

In other words: Ctrl+> travels in byte-order, rather than display-order.

So - back to your question of how to overcome it...

Unless you were to write some fairly complicated JavaScript (which contains its own set of challenges and troubles) to alter the way the keyboard navigation works within your boxes, there is no good way to "fix" it. However, you could try the following alternatives, if you feel it will negatively impact your customers:

1. Provide training. Learn the in's and out's of the quirky keyboard tricks, and teach your users. (I know, I know, a lot of work and you probably don't have the time/budget).
2. Trust your users. Chances are, if your users are inputting mixed LTR and RTL text in your application, it's also something they do regularly in other applications. This means they are probably used to this set of issues, because it's a standard set of issues. If they do it a lot - they probably already have workarounds which they're used to - and you changing it to fix it might actually hurt their productivity.
3. Document it, and submit feature requests. If you think this is something a given browser or vendor (like Microsoft) should implement differently, get active in their user community and push for updates, patches and feature additions. This is how the world of software gets better - and it doesn't put the burden of being the change-agent solely on your organization, or, worse - on you.

Actually you cannot do it. As an Hebrew speaking person I can tell you that there are lot's of problems in this area, especially when you mix RTL and LTR languages or sometimes numbers. There is nothing you can do. Sometimes the browser can handle it and sometimes it can't. For example in Chrome when you use Ctrl key to go faster inside an Hebrew text, the directions of the right and left keys change to their opposite.

All you need to do is add div with style:

<div style="direction:ltr">
<textarea id="geometry" class="form-control" placeholder="Lat lon" rows="3"></textarea>
</div>

LOL, 2010s were really hard.

Just put this css property and you are good to go:

    unicode-bidi: plaintext;