如何动态更改Google Transliterate中的语言?

时间:2018-09-21 07:52:50

标签: javascript jquery google-api transliteration

我在这里遇到了一个问题,已经快一天了。 我有一个语言选择框和一个文本框。

这是HTML:

<select id="language" class="form-control">
    <option id="1">HINDI</option>
    <option id="2">KANNADA</option>
    <option id="3">BANGLA</option>
</select>
<textarea class="form-control" type="text" id="TextArea" maxlength ="500" placeholder="Enter text here..."></textarea>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

脚本在这里:

// Load the Google Transliterate API
google.load("elements", "1", {
    packages: "transliteration"
});

var language = $('#language option:selected').val().toUpperCase();

function onLoad() {
    debugger;
    var options = {
         sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
         destinationLanguage:[google.elements.transliteration.LanguageCode[language]],
         shortcutKey: 'ctrl+g',
         transliterationEnabled: true
    };
    var control = new google.elements.transliteration.TransliterationControl(options);
    control.makeTransliteratable(['TextArea']);
}

google.setOnLoadCallback(onLoad);

//change the language on dropdown change
$('#language').on('change', function(event){
    debugger;
    language = $(this,':selected').val().toUpperCase();
    google.setOnLoadCallback(onLoad);
});

这里的问题是它不会弹出任何错误。 音译API也不起作用。

对于一种语言,当它是静态的时,它就像一种魅力。

1 个答案:

答案 0 :(得分:0)

有一个专用的函数可以处理Google Transliterate API中的语言更改。

这是代码

<select id="language" class="form-control">
    <option id="1">HINDI</option>
    <option id="2">KANNADA</option>
    <option id="3">BANGLA</option>
</select>
<textarea class="form-control" type="text" id="TextArea" maxlength ="500" placeholder="Enter text here..."></textarea>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

JS代码:

// Load the Google Transliterate API
google.load("elements", "1", {
    packages: "transliteration"
});

var language = $('#language option:selected').val().toUpperCase();
var control;

function onLoad() {
    var options = {
         sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
         destinationLanguage:[google.elements.transliteration.LanguageCode[language]],
         shortcutKey: 'ctrl+g',
         transliterationEnabled: true
    };
    control = new google.elements.transliteration.TransliterationControl(options);
    control.makeTransliteratable(['TextArea']);
}

google.setOnLoadCallback(onLoad);

//change the language on dropdown change
$('#language').on('change', function(event){
    language = $(this,':selected').val().toUpperCase();

    //function to change the language dynamically(Google API)
    control.setLanguagePair(
        google.elements.transliteration.LanguageCode.ENGLISH,
        google.elements.transliteration.LanguageCode[language]);
});

希望这会有所帮助。
谢谢!