0

enter image description here

I am trying to read the value of an input text field entered in the Arabic language using javascript.

But as you can see in the screenshot it's not fetching the text in the same way I typed.

The number '123' which is on the right side of the input field is jumping to the left side when I try to read the entered input field value using js code.

Please help me to solve this issue.

Below is the code that I am using:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html:lang(ar){
            direction: rtl;
        }
    </style>
</head>
<body>
    <input type="text" dir="rtl" name="" id="textbox">
</body>
</html>

Thanks in advance :)

Wiktor Stribiżew
  • 607,720
  • 39
  • 448
  • 563
Siva
  • 43
  • 5
  • If you output the Arabic RTL text in the console, it will be shown in the LRT direction. If you output the text in another Html field with RTL set for that field it will display correctly. – Mohsen Alyafei Jan 06 '22 at 23:08
  • The Arabic text is read correctly. There is no problem with reading the text. The issue is that anything you output to the console will be shown as Left-To-Right. The console is not the place to display RTL text. – Mohsen Alyafei Jan 06 '22 at 23:19

1 Answers1

1

If you output the Arabic RTL text in the console, it will be shown in the LRT direction. If you output the text in another Html field with RTL set for that field it will display correctly

Here is an example. Output the Arabic text into another field will be displayed correctly.

    <!DOCTYPE html>
    <html lang="ar">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            html:lang(ar){direction: rtl;}
        </style>
    </head>
    <body>
    <input type="text" id="inputText" oninput="outputIt()">
    <div id="outputText"></div>
    </body>

    <script>
    function outputIt() {
document.getElementById("outputText").innerHTML = document.getElementById("inputText").value;
    }
    </script>
    </html>
Mohsen Alyafei
  • 4,765
  • 3
  • 30
  • 42
  • 1
    But is there any way to read the text in the same way we typed? – Siva Jan 07 '22 at 05:15
  • It is actually read by the App in the same way you typed it. It is the way that you display it that is different. When you start typing, there is a first letter, 2nd letter, 3rd letter, until the last letter. They are stored in memory in that sequence irrespective of language. Then you can display it LTR or RTL. It is just the way we display it on the left or right of the viewport (being a console or a text field, etc.). – Mohsen Alyafei Jan 07 '22 at 06:04
  • Ok Thanks for the inputs Mohsen!! – Siva Jan 07 '22 at 08:03