Search code examples
javascriptgoogle-translatetransliteration

I want to type in english in one text box and want converted text in Arabic into another text

My requirement is clear ... I want to type in english in one text box and want converted text in Arabic into another text and if I edit first text box using backspace ,delete etc same effect should be reflated in text box two .........I have used the following code 

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
    google.load("elements", "1", {
        packages: "transliteration"
    });
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
    function OnLoad() {
        var options = {
            sourceLanguage:
            google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
            [google.elements.transliteration.LanguageCode.ARABIC],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };

        var control = new google.elements.transliteration.TransliterationControl(options);
        control.makeTransliteratable(["txtHindi"]);
        var keyVal = 32; // Space key
        $("#txtEnglish").on('keydown', function (event) {
            if (event.keyCode === 32) {
                var engText = $("#txtEnglish").val() + " ";
                var engTextArray = engText.split(" ");
                $("#txtHindi").val($("#txtHindi").val() + engTextArray[engTextArray.length - 2]);

                document.getElementById("txtHindi").focus();
                $("#txtHindi").trigger({
                    type: 'keypress', keyCode: keyVal, which: keyVal, charCode: keyVal
                });
            }
        });

        $("#txtHindi").bind("keyup", function (event) {
            setTimeout(function () { $("#txtEnglish").val($("#txtEnglish").val() + " "); document.getElementById("txtEnglish").focus() }, 0);
        });
    } //end onLoad function

    google.setOnLoadCallback(OnLoad);


</script> 

    <script type="text/javascript">
        function clearText() {

            document.getElementById("txtEnglish").value = ""
            document.getElementById("txtHindi").value = ""
        }

    </script>

</head>
    <body>
       English Text: <input size="40" type="text" id="txtEnglish"/> <br/>
       Arabic Text`enter code here` : <input size="40" type="text" id="txtHindi"/> 
        <input type="button" id="CmdShowKeyboard" value="Clear" onclick="clearText()">
</body>
</html>

Its working fine but when I use Backspaces or delete remove text from textbox one its not workable and gives wrong output in second text box pls suggest

Solution

  • I think this should work

    $("#txtEnglish").on('keydown', function (event) {
    if (event.keyCode === 32 || event.keyCode === 8) {
        var engText = $("#txtEnglish").val() + " ";
        var engTextArray = engText.split(" ");
        if(event.keyCode === 32)
        {
           $("#txtHindi").val($("#txtHindi").val() + engTextArray[engTextArray.length - 2]);
        }

        document.getElementById("txtHindi").focus();
        $("#txtHindi").trigger({
                    type: 'keypress', keyCode: keyVal, which: keyVal, charCode: keyVal
                });
            }
        });

        $("#txtHindi").bind("keyup", function (event) {
            setTimeout(function(){
                if (event.keyCode === 32) {
                    $("#txtEnglish").val($("#txtEnglish").val()+ ' ');
                }
                else if(event.keyCode === 8)
                {
                    $("#txtEnglish").val($("#txtEnglish").val().substring(0,$("#txtEnglish").val().length - 1));
                }
                document.getElementById("txtEnglish").focus()
            },0);
        });