Unable to read the value of input text in arabic language in the same way I typed in Javascript

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 🙂

Answer

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>

Advertisement

Answer