How to detect the language and change HTML input text direction automatically with CSS and jQuery

1 Answer

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>  
    </head>

    <body>

        <form name="yourForm" method="get">
            <input type="text" >
            <input type="submit" value="search" name="search" />
        </form>

        <script type="text/JavaScript">
            $('input').keyup(function(){
                $this = $(this);
                if($this.val().length == 1)
                {
                    var ch =  new RegExp("[\x00-\x80]+"); // ascii characters

                    var isAscii = ch.test($this.val());

                    if(isAscii)
                    {
                        $this.css("direction", "ltr");
                    }
                    else
                    {
                        $this.css("direction", "rtl");
                    }
                }

            });
        </script>

    </body>
</html>

/* css file */

input
{
    direction:ltr;
}

Cleaner teeth, healthier you!
Get The Secret to a Bright and Healthy Smile

answered Apr 4, 2016 by avibootz
edited Feb 13, 2019 by avibootz

Most popular tags

How to detect the language and change HTML input text direction automatically with CSS and jQuery

1 Answer

Related questions