How to change cursor position in textarea, when language is changed?

Question

I have a textarea which can take both English and Arabic language.

The English language starts from left to right. So, the cursor should begin in the left.

The Arabic language starts from the right. So the cursor should begin in the right.

How can I change the position of the cursor when the user changes his language? If his language is English the cursor should be on the left and vice-versa.

The user can change his language using ALT + SHIFT in the keyboard.

I have tried this, but it didn't give me any result.

<textarea class="form-control description arabic" id="txt_desc" name="txt_desc" 
          placeholder="Description"></textarea>

.arabic{text-align:right;}

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var reverseFunc = function() {
            $('textarea').each(function() {
                if($(this).hasClass('arabic')) {
                    // do the invert magic...
                    var val = $(this).val();
                    var newVal = val.charAt(val.length-1) + substr(0, val.length-1);
                    $(this).val(val);
                }
            });
        }

        $('textarea').bind('keyup', reverseFunc);
    });
</script>

using shiftkey:

var x = document.getElementById("txt_desc");
    if (event.shiftKey) {
        document.getElementById('txt_desc').style.direction="rtl";
    }else{
         document.getElementById('txt_desc').style.direction="ltr";
    }

Possible duplicate of [Right to left Text HTML input](https://stackoverflow.com/questions/7524855/right-to-left-text-html-input) — Guillaume Georges, Sep 04 '17 at 11:21

Nrome · Accepted Answer · 2017-09-04T12:11:17.730

check the first character on keyup, if it's Arabic add this direction: rtl;

var la_ar = 
["ي","و","ه","ش","س","ق","ف","غ","ع","ض","ص","ن","م","ل","ك","ظ","ط","ز","ر","ذ","د","خ","ح","ج","ث","ت","ب","ا"]

$("input").keyup(function(){
var la_ar = 
["ي","و","ه","ش","س","ق","ف","غ","ع","ض","ص","ن","م","ل","ك","ظ","ط","ز","ر","ذ","د","خ","ح","ج","ث","ت","ب","ا"]
    var bla = $(this).val();
    var blaـl = bla.charAt(0);
    if($.inArray(blaـl, la_ar) > -1 ){
      //alert('in');
      $(this).css("direction","rtl");


    }else{
      //alert('out');
      $(this).css("direction","ltr");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">

@mohamad mohamad " هل هذا ما تريد" is this what you want — Nrome, Sep 04 '17 at 12:07

laxman kanhere · Answer 2 · 2017-09-04T12:12:24.143

0

 use the css attribute direction

    direction: rtl;

    In Javascript your code add this

    var x = document.getElementById("txt_desc");
        if (event.shiftKey) {
            document.getElementById('txt_desc').style.direction="rtl";
        }else{
             document.getElementById('txt_desc').style.direction="ltr";
        }

edited Sep 04 '17 at 12:12

answered Sep 04 '17 at 11:25

laxman kanhere

53
8

thank you the rtl work but i want the cursor appear in the left or right – mohamad mohamad Sep 04 '17 at 11:33
can we do that without the button on off only when the user change the language click alt+shif ?? – mohamad mohamad Sep 04 '17 at 11:45
Yes you can using event.shiftKey and call the method – laxman kanhere Sep 04 '17 at 11:47
How can i do that ? – mohamad mohamad Sep 04 '17 at 11:48
onkeypress='alert(event.keyCode)' check the keycode and cal this method – laxman kanhere Sep 04 '17 at 11:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153611/discussion-between-laxman-kanhere-and-mohamad-mohamad). – laxman kanhere Sep 04 '17 at 11:52

score 0 · Answer 3 · edited Sep 04 '17 at 11:54

0

You have to use Html5 property this will work.

.arabic{ direction: rtl;}

edited Sep 04 '17 at 11:54

Purvik Dhorajiya

4,662
3
34
43

answered Sep 04 '17 at 11:32

Mehraj Khan

927
6
17

thank you the rtl work but i want the cursor appear in the left or right – mohamad mohamad Sep 04 '17 at 11:33

score 0 · Answer 4 · edited Sep 04 '17 at 12:25

0

You can try this:

<textarea style="direction: rtl"></textarea>

edited Sep 04 '17 at 12:25

Nick is tired

6,860
20
39
51

answered Sep 04 '17 at 11:43

Mehraj Khan

927
6
17

How to change cursor position in textarea, when language is changed?

4 Answers4