Use a API AJAX de idioma do Google para traduzir e detectar o idioma de blocos de texto dentro de uma página web, usando JavaScript.
A API é nova, portanto poderá haver alguns problemas e uma documentação ainda incompleta. Seja paciente enquanto tomamos as providências necessárias. Participe do fórum do desenvolvedor de APIs AJAX para fornecer comentários e discutir questões sobre a API.
Esta documentação foi criada para pessoas que estão familiarizadas com JavaScript e programação orientada a objetos. Há diversos tutoriais de JavaScript disponíveis na Web.
A maneira mais fácil de começar a aprender sobre esta API é por meio de um simples exemplo. O exemplo abaixo detecta o idioma do texto fornecido e o traduz para o inglês.
|
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = document.getElementById("text").innerHTML;
google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, "en",
function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="text">??????????</div>
<div id="translation"></div>
</body>
</html>
Você pode visualizar este exemplo aqui ou editar e brincar com um exemplo semelhante no Playground de código.
Para incluir a API AJAX de idioma do Google na sua página, use o carregador da API AJAX do Google. O carregador comum permite que você carregue todas as APIs AJAX do Google de que precisa, incluindo a API de idioma. Você precisa incluir a tag de script de APIs AJAX do Google e chamar google.load("language",
"1"):
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("language", "1");
</script>
A primeira tag de script carrega a função google.load, que permite carregar APIs individuais do Google. google.load("language", "1") carrega a Versão 1 da API de idioma. A API AJAX de idioma do Google está atualmente na Versão 1, mas novas versões poderão ser disponibilizadas no futuro. Consulte a discussão sobre criação de versão abaixo para obter mais informações.
O segundo argumento para google.load é a versão da API AJAX de idioma do Google que você está usando. A API AJAX de idioma do Google está atualmente na versão 1, mas novas versões poderão ser disponibilizadas no futuro.
Se uma atualização importante para a API ocorrer no futuro, o número da versão será alterado e um aviso será postado no Google Code e no grupo de discussão de APIs AJAX. Quando isso ocorrer, o suporte para ambas as versões ocorrerá durante pelo menos um mês, para que você possa realizar a migração do seu código.
OAA equipe da API AJAX de idioma do Google atualiza a API periodicamente com as últimas correções e aprimoramentos de desempenho. Essas correções devem apenas melhorar o desempenho e corrigir bugs, mas podemos prejudicar inadvertidamente alguns clientes da API. Nesse caso, use o grupo de discussão sobre as APIs AJAX para relatar esses problemas.
Há diversos exemplos disponíveis no Playground de código que você pode editar e experimentar para entender melhor como usar esta API.
Este exemplo mostra uma tradução simples de uma string Javascript:
google.language.translate("Hello world", "en", "es", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});
Este exemplo mostra a detecção de idioma de uma string Javascript. O código do idioma é retornado:
var text = "¿Dónde está el baño?";
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: " + language + "";
}
});
Navegadores e sistemas operacionais podem ou não ter suporte para a exibição de fontes Unicode específicas. Você pode detectar se o usuário que está usando a sua página web tem suporte para exibir as fontes de um determinado idioma de forma legível usando a API de detecção de suporte para exibição de fontes. Isso funciona corretamente apenas para fontes Unicode. Se a sua página web for exibida usando fontes que não sejam Unicode, esta função não será útil para você. Se o suporte para exibição de fontes não estiver presente para um determinado idioma, há diversas soluções disponíveis para corrigir isso. Leia este artigo para obter mais informações.
Este exemplo mostra a detecção do suporte para exibição de fontes:
var result = google.language.isFontRenderingSupported("hi");
var resultStr = "";
if (result == google.language.FontRenderingStatus.SUPPORTED) {
resultStr = "Rendering for " + lang + " is supported.";
} else if (result == google.language.FontRenderingStatus.UNSUPPORTED) {
resultStr = "Rendering for " + lang + " is not supported.";
} else {
resultStr = "Unsupported language " + lang + " for font detection API.";
}
var resultDiv = document.getElementById("displayResultsDiv");
resultDiv.innerHTML += resultStr;
Ver exemplo (fontdetection.html)
O seguinte exemplo é semelhante ao exemplo de tradução básica, mas mostra como traduzir o texto sem conhecer o idioma de origem. Ao especificar uma string vazia como desconhecida para o idioma de origem, o sistema irá detectá-la e traduzi-la em uma chamada.
google.language.translate("Hello world", "", "es", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});
Ver exemplo (autotranslate.html)
Quando seu aplicativo usa as APIs AJAX de idioma do Google, é importante divulgar a marca Google aos seus usuários. O método google.language.getBranding() foi criado para ajudá-lo com isso. O método aceita um elemento DOM HTML ou o ID correspondente, além de opções cujo uso não é obrigatório. A marca é anexada ao elemento fornecido.
// attach a "powered by Google" branding
<div id='branding'> </div>
...
google.language.getBranding('branding');
A marca pode ser personalizada usando CSS e é apresentada nos formatos básicos 'vertical' e 'horizontal'. Veja abaixo um exemplo mostrando os diversos formatos e a personalização por CSS.
Veja dois exemplos adicionais que permitem interação. O primeiro realiza a detecção do idioma com uma string de texto pré-programada, mas permite que outro texto seja inserido. Também exibe fatores de confiabilidade. Além disso, você pode experimentar com exemplos semelhantes no Playground de código.
O segundo exemplo adicional faz a tradução. No entanto, ele também permite uma interação similar ao exemplo acima.
No momento, a API AJAX de idioma do Google suporta os seguintes idiomas. A tecnologia está em constante aprimoramento e a equipe está trabalhando bastante para expandir esta lista, por isso, consulte-a com frequência. Você também pode visitar o Google Tradutor para visualizar uma lista atualizada de idiomas suportados.
Atualmente, a API AJAX de idioma do Google detecta todos os idiomas listados acima. O subconjunto desses idiomas que podem ser traduzidos são listados abaixo. Quaisquer pares de idiomas da lista a seguir podem ser traduzidos. Para testar se um idioma pode ser traduzido, use google.language.isTranslatable(languageCode);
Para os desenvolvedores de Flash e desenvolvedores que precisam acessar a API AJAX de idioma do Google a partir de outros ambientes que não sejam Javascript, a API oferece uma interface RESTful simples. Em todos os casos, GET é o método suportado e o formato de resposta é um resultado codificado JSON com códigos de status incorporados. Para google.language.translate, o método POST está disponível. Os aplicativos que usam esta interface devem obedecer a todos os termos de uso existentes. Você deve ter atenção especial quanto a se identificar corretamente em suas solicitações. Os aplicativos sempre DEVEM incluir um cabeçalho de referência http em suas solicitações. Além disso, pedimos que cada solicitação contenha uma chave de API válida, mas isso não é obrigatório. Ao fornecer uma chave, o seu aplicativo nos fornece um mecanismo secundário de identificação. Isso é útil para o caso de ser necessário entrar em contato com você para corrigir algum problema.
A maneira mais fácil de aprender sobre esta interface é experimentá-la. Use a ferramenta de linha de comando curl ou wget e execute o comando abaixo:
curl -e http://www.my-ajax-site.com \
'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit'
Este comando executa uma Tradução de idioma (/ajax/services/language/translate), do Hello, World (q=hello%20world) do inglês para italiano (langpair=en%7Cit). A resposta possui um Content-Type do tipo text/javascript; charset=utf-8. Na resposta abaixo, você pode ver que responseData é idêntico às propriedades descritas na documentação de Objetos do resultado.
{"responseData": {
"translatedText":"Ciao mondo"
},
"responseDetails": null, "responseStatus": 200}
Além desse formato de resposta, o protocolo também suporta um retorno de chamada do estilo JSON-P clássico, que é disparado especificando um argumento callback. Quando este argumento está presente, o objeto JSON é fornecido como um argumento para o retorno de chamada especificado.
callbackFunction(
{"responseData": {
"translatedText":"Ciao mondo"
},
"responseDetails": null, "responseStatus": 200})
E por fim, o protocolo suporta os argumentos callback e context. Quando esses argumentos de URL são especificados, a resposta é codificada como uma chamada Javascript direta com uma assinatura de: callback(context, result, status, details, unused). Observe a ligeira diferença no comando e na resposta abaixo.
curl -e http://www.my-ajax-site.com \ 'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit&callback=foo&context=bar'
Este comando executa uma Tradução de idioma idêntica à chamada anterior, MAS foi alterado para passar callback e context. Com esses argumentos, em vez de retornar um objeto JSON, a resposta retorna uma chamada JavaScript e o objeto JSON é passado usando o parâmetro result.
foo('bar', {"translatedText":"Ciao mondo"}, 200, null)
Para obter a documentação completa sobre esta interface, visite o Manual de referência de classe.
Se você tiver algum problema com seu código:
Com a API AJAX de idioma do Google para transliteração, você pode ativar a transliteração em qualquer campo ou área de texto na sua página web. Isso ajuda os seus usuários a digitar em qualquer idioma usando um teclado em inglês.
O que é transliteração? Transliteração é o processo de conversão fonética de uma palavra escrita em um script para outro. Transliteração não deve ser confundida com tradução, que envolve uma alteração no idioma, preservando o significado. Com a transliteração, é o som das palavras que é convertido de um alfabeto para outro.
Esta documentação foi criada para pessoas que estão familiarizadas com JavaScript e programação orientada a objetos. Há muitos tutoriais de JavaScript disponíveis na web. Você também deve estar familiarizado com a transliteração do ponto de vista de um usuário. Consulte as páginas Transliteração em idiomas índicos ou Transliteração em árabe para saber como usar a transliteração. Consulte este artigo para obter mais detalhes.
Esta documentação conceitual não é completa nem esgota o assunto; foi desenvolvida para permitir que você comece a explorar e incorporar rapidamente a transliteração à sua página.
A maneira mais fácil de começar a aprender sobre esta API é por meio de um simples exemplo. O seguinte exemplo permite a transliteração em uma área de texto com um idioma como o Hindi, para que os usuários possam digitar em Hindi usando um teclado em inglês. O usuário também pode alternar entre digitar em inglês e em hindi usando "ctrl+g" como atalho. Para obter informações sobre como selecionar um idioma diferente, consulte a referência de classe da API.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.HINDI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Hindi (Press Ctrl+g to toggle between English and Hindi)<br>
<textarea id="transliterateTextarea" style="width:600px;height:200px"></textarea>
</body>
</html>
Veja um exemplo no Playground de código
A API AJAX de transliteração encontra-se no módulo "elementos". Para incluir a API de transliteração do Google na sua página, primeiro você precisa da tag de script das APIs AJAX do Google:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
Esta tag de script carregará a função google.load, que permite o carregamento de APIs individuais do Google. Para o carregamento da API de transliteração do Google, as chamadas para google.load têm a seguinte aparência:
<script type="text/javascript">
google.load("elements", "1", {
packages: "transliteration"
});
</script>
Isso carrega a Versão 1 da API de transliteração. A API de transliteração está atualmente na Versão 1, mas novas versões poderão ser disponibilizadas no futuro. Consulte a discussão sobre criação de versão abaixo para obter mais informações.
O segundo argumento para google.load é a versão da API AJAX de idioma do Google que você está usando. A API de transliteração está atualmente na versão 1, mas novas versões poderão ser disponibilizadas no futuro.
Se uma atualização importante para a API for realizada no futuro, o número da versão será alterado e um aviso será postado no Google Code e no grupo de discussão de APIs AJAX. Quando isso ocorrer, o suporte para ambas as versões ocorrerá durante pelo menos um mês, para que você possa realizar a migração do seu código.
A equipe da API AJAX de idioma do Google atualiza a API periodicamente com as últimas correções e aprimoramentos de desempenho. Essas correções de falhas só devem melhorar o desempenho e corrigir falhas, mas podem prejudicar inadvertidamente alguns clientes da API. Nesse caso, use o grupo de discussão sobre as APIs AJAX para relatar esses problemas.
Este exemplo é muito semelhante ao exemplo básico mostrado na seção Introdução, mas exibe um controle para alternância entre modos de digitação em inglês e hindi. Também permite a transliteração em dois campos de texto.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage: 'en', // or google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: ['hi'], // or [google.elements.transliteration.LanguageCode.HINDI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between
// English and Hindi.
control.showControl('translControl');
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Hindi (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'></div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
</body>
</html>
Veja o exemplo (singlelangtransliteration.html)
Este exemplo é muito semelhante ao exemplo acima, mas exibe um controle no qual o idioma de destino pode ser escolhido. Nesse exemplo, a opção destinationLanguage como ['te', 'ta', 'ml'].
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage: 'en',
destinationLanguage: ['hi','kn','ml','ta','te'],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between
// English and Hindi and also choose other destination language.
control.showControl('translControl');
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'></div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
</body>
</html>
Veja o exemplo (multilangtransliteration.html)
Este é um exemplo avançado que mostra como criar seu próprio controle personalizado para controlar a transliteração. O exemplo usa uma caixa de seleção para alternar entre os modos de digitação em inglês e hindi e uma lista suspensa para alterar o idioma de destino. Esse exemplo também registra manipuladores de evento para diversos eventos que podem ser acionados pelo TransliterationControl. Consulte a referência de classe da API para obter detalhes sobre possíveis eventos.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
var transliterationControl;
function onLoad() {
var options = {
sourceLanguage: 'en',
destinationLanguage: ['ar','hi','kn','ml','ta','te'],
transliterationEnabled: true,
shortcutKey: 'ctrl+g'
};
// Create an instance on TransliterationControl with the required
// options.
transliterationControl =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
transliterationControl.makeTransliteratable(ids);
// Add the STATE_CHANGED event handler to correcly maintain the state
// of the checkbox.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
transliterateStateChangeHandler);
// Add the SERVER_UNREACHABLE event handler to display an error message
// if unable to reach the server.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
serverUnreachableHandler);
// Add the SERVER_REACHABLE event handler to remove the error message
// once the server becomes reachable.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
serverReachableHandler);
// Set the checkbox to the correct state.
document.getElementById('checkboxId').checked =
transliterationControl.isTransliterationEnabled();
// Populate the language dropdown
var destinationLanguage =
transliterationControl.getLanguagePair().destinationLanguage;
var languageSelect = document.getElementById('languageDropDown');
var supportedDestinationLanguages =
google.elements.transliteration.getDestinationLanguages(
google.elements.transliteration.LanguageCode.ENGLISH);
for (var lang in supportedDestinationLanguages) {
var opt = document.createElement('option');
opt.text = lang;
opt.value = supportedDestinationLanguages[lang];
if (destinationLanguage == opt.value) {
opt.selected = true;
}
try {
languageSelect.add(opt, null);
} catch (ex) {
languageSelect.add(opt);
}
}
}
// Handler for STATE_CHANGED event which makes sure checkbox status
// reflects the transliteration enabled or disabled status.
function transliterateStateChangeHandler(e) {
document.getElementById('checkboxId').checked = e.transliterationEnabled;
}
// Handler for checkbox's click event. Calls toggleTransliteration to toggle
// the transliteration state.
function checkboxClickHandler() {
transliterationControl.toggleTransliteration();
}
// Handler for dropdown option change event. Calls setLanguagePair to
// set the new language.
function languageChangeHandler() {
var dropdown = document.getElementById('languageDropDown');
transliterationControl.setLanguagePair(
google.elements.transliteration.LanguageCode.ENGLISH,
dropdown.options[dropdown.selectedIndex].value);
}
// SERVER_UNREACHABLE event handler which displays the error message.
function serverUnreachableHandler(e) {
document.getElementById("errorDiv").innerHTML =
"Transliteration Server unreachable";
}
// SERVER_UNREACHABLE event handler which clears the error message.
function serverReachableHandler(e) {
document.getElementById("errorDiv").innerHTML = "";
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'>
<input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()"></input>
Type in <select id="languageDropDown" onchange="javascript:languageChangeHandler()"></select>
</div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
<br><div id="errorDiv"></div>
</body>
</html>
Veja o exemplo (customtransliteration.html)
A API de nível inferior para transliteração usa a API AJAX de idioma do Google (e não o pacote de elementos usado por outras APIs de transliteração). Para incluir a API AJAX de idioma do Google na sua página, use o carregador da API AJAX do Google e siga as instruções especificadas aqui.
Este exemplo mostra uma transliteração simples de uma string Javascript:
google.language.transliterate(["Namaste"], "en", "hi", function(result) {
if (!result.error) {
var container = document.getElementById("transliteration");
if (result.transliterations && result.transliterations.length > 0 &&
result.transliterations[0].transliteratedWords.length > 0) {
container.innerHTML = result.transliterations[0].transliteratedWords[0];
}
}
});
Veja o exemplo (transliterate.html)
Atualmente, a API de transliteração suporta a transliteração da versão em inglês do alfabeto latino para os scripts dos seguintes idiomas:
O controle de transliteração exibido usando o método showControl pode ser personalizado para se ajustar ao estilo da sua página web por meio da extensão das classes CSS definidas no arquivo CSS padrão. O arquivo CSS padrão é carregado automaticamente na chamada google.load() e define os estilos para o controle e o menu de sugestões de transliteração exibido quando você clica ou edita uma palavra transliterada. Se você não quiser carregar o CSS padrão, defina "nocss" como true.
google.load("elements", "1", {packages: "transliteration", "nocss" : true});
O menu de seleção de idioma, o botão indicando o idioma selecionado pelo usuário e o menu de sugestões ficam dentro de elementos div marcados com classes CSS específicas. Você pode definir as regras CSS de substituição que são aplicadas a esses elementos para personalizá-los de acordo com a sua página. Consulte este arquivo CSS de transliteração documentada para obter detalhes do CSS padrão carregado com o pacote da API de transliteração. Veja abaixo uma lista de classes CSS úteis para personalização:
Por exemplo, a definição do parâmetro background-color de goog-transliterate-indic-suggestion-menu permite que o plano de fundo do menu de sugestões exibido seja alterado do valor padrão #F0A000 para o novo valor.
Para sistemas de escrita da direita para a esquerda, como árabe, a API, por padrão, ajusta automaticamente a direção da área de texto, de acordo com a direção do sistema de escrita que está sendo usado e com o conteúdo da área de texto. A direção de uma área de texto é definida em HTML e JavaScript com direction, que pode ter o valor 'ltr' ou 'rtl'. Ela afeta o alinhamento do cursor e da área de texto.
Veja um exemplo de transliteração em árabe (arabictransliteration.html)
A API de transliteração é suportada pelo Firefox 1.5 e superior no Windows e no Linux e no Internet Explorer 6.0 e superior no Windows (preferencialmente no Windows XP). A API de transliteração pode ser carregada sem erros em quase todos os navegadores, por isso você pode carregá-la com segurança antes de verificar a compatibilidade.
Às vezes, aplicativos diferentes exigem comportamentos distintos tendo em vista usuários com navegadores incompatíveis. A API de transliteração fornece um método global google.elements.transliteration.isBrowserCompatible() para verificar a compatibilidade, mas não apresenta nenhum comportamento automático quando detecta um navegador incompatível. A maior parte dos exemplos deste documento não verifica a compatibilidade do navegador, nem exibe uma mensagem de erro em relação a navegadores mais antigos. É claro que aplicativos reais devem fazer algo mais amigável em relação a navegadores incompatíveis, mas omitimos essas verificações para que os exemplos ficassem mais legíveis.
A API de transliteração manipula muito texto UTF-8 e, por isso, é necessário definir o tipo de conteúdo da sua página como UTF-8 adicionando esta metatag <meta
http-equiv="Content-Type" content="text/html; charset=utf-8"/>. Sem esta metatag, a API de transliteração não funcionará adequadamente na sua página web.
Se você tiver algum problema com seu código:
Com a API AJAX de idioma do Google para teclado virtual, você pode ativar o teclado na tela em qualquer campo ou área de texto na sua página web. Isso ajudará os usuários do seu site a digitar em qualquer idioma usando layouts de teclado com os quais estão familiarizados.
O que é um teclado virtual? Um teclado virtual é usado para traduzir a entrada de um layout de teclado para outro.
Esta documentação foi criada para pessoas que estão familiarizadas com JavaScript e programação orientada a objetos. Há diversos tutoriais de JavaScript disponíveis na web.
Esta documentação conceitual não é completa nem esgota o assunto; foi desenvolvida para permitir que você comece a explorar e incorporar rapidamente o teclado virtual à sua página.
A maneira mais fácil de começar a aprender sobre esta API é por meio de um simples exemplo. O exemplo abaixo ativa o Teclado virtual em uma área de texto com layout de teclado em russo, de modo que os usuários possam digitar em russo usando um teclado físico em inglês ou usando o mouse. O usuário também pode ocultar/mostrar o teclado virtual clicando nos botões +/- no teclado na tela. Para obter informações sobre como selecionar um layout diferente, consulte a referência de classe da API
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
function onLoad() {
var kbd = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.RUSSIAN],
['t1']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Russian<br/>
<textarea id="t1" style="width: 600px; height: 200px;"></textarea>
</body>
</html>
Você pode experimentar com um exemplo semelhante no Playground de código.
A API AJAX de teclado virtual encontra-se no módulo "elementos". Para incluir a API de teclado virtual do Google na sua página, primeiro você precisa da tag de script das APIs AJAX do Google:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
Esta tag de script carregará a função google.load, que permite o carregamento de APIs individuais do Google. Para o carregamento da API de teclado virtual do Google, as chamadas para google.load têm a seguinte aparência:
<script type="text/javascript">
google.load("elements", "1", {
packages: "keyboard"
});
</script>
Isso carrega a Versão 1 da API de teclado virtual. A API de teclado virtual está atualmente na Versão 1, mas novas versões poderão ser disponibilizadas no futuro. Consulte a discussão sobre criação de versão abaixo para obter mais informações.
O segundo argumento para google.load é a versão da API AJAX de idioma do Google que você está usando. A API de teclado virtual está atualmente na versão 1, mas novas versões poderão ser disponibilizadas no futuro.
Se uma atualização importante para a API for realizada no futuro, o número da versão será atualizado e um aviso será postado no Google Code e no grupo de discussão de APIs AJAX. Quando isso ocorrer, o suporte para ambas as versões ocorrerá durante pelo menos um mês, para que você possa realizar a migração do seu código.
A equipe da API AJAX de idioma do Google atualiza a API periodicamente com as últimas correções e aprimoramentos de desempenho. Essas correções devem apenas melhorar o desempenho e corrigir bugs, mas podem prejudicar inadvertidamente alguns clientes da API. Use o grupo de discussão sobre as APIs AJAX para relatar esses problemas.
O exemplo abaixo mostra como ocultar ou mostrar o teclado no seu código. Quando um teclado virtual fica oculto, o usuário digita usando o layout do teclado físico.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
var kbd; // A Keyboard object.
function onLoad() {
// Create an instance on Keyboard.
kbd = new google.elements.keyboard.Keyboard([
google.elements.keyboard.LayoutCode.POLISH],
['t1']);
}
// If the keyboard is visible, hide it.
// If the keyboard is invisible, show it.
function toggleVisible() {
var button = document.getElementById("btVisible");
if (kbd.isVisible()) {
kbd.setVisible(false);
document.getElementById('btVisible').value = "Show";
} else {
kbd.setVisible(true);
document.getElementById('btVisible').value = "Hide";
}
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
This is a demo for setVisible/isVisible.<br/>
<input type="button" onclick="toggleVisible()" id="btVisible" value="Hide"></input><br/>
<textarea type="text" id="t1" style="width: 600px; height: 200px;"></textarea>
</body>
</html>
Você pode experimentar com um exemplo semelhante no Playground de código.
O exemplo abaixo é parecido com o exemplo básico mostrado na seção Introdução, mas mostra como alternar o layout de um teclado virtual no seu código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
var kbd; // A Keyboard object.
function onLoad() {
// Create an instance on Keyboard.
kbd = new google.elements.keyboard.Keyboard([
google.elements.keyboard.LayoutCode.RUSSIAN],
['t1']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
This is a demo for setLayout/getLayout.<br/>
<script type="text/javascript">
</script>
<input type="button" onclick="kbd.setLayout('ru')" value="Russian" /><br/>
<input type="button" onclick="kbd.setLayout('hi')" value="Hindi" /><br/>
<input type="button" onclick="kbd.setLayout('th')" value="Thai" /><br/>
<input type="button" onclick="kbd.setLayout('ar')" value="Arabic" /><br/>
<input type="button" onclick="kbd.setLayout('pl')" value="Polish" /><br/>
<input type="button" onclick="kbd.setLayout('fa')" value="Persian" /><br/>
<input type="text" id="t1" style="width: 600px"></input>
</body>
</html>
Você pode experimentar com um exemplo semelhante no Playground de código.
O exemplo abaixo enumera os layouts de teclado suportados e traça um menu de layout na página:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
var kbd; // A Keyboard object.
// Draw a list of keyboard layouts in their native languages.
// User can click any of them to switch to that keyboard layout.
function drawMenu() {
html = ["<ul>"];
for (var i in google.elements.keyboard.LayoutCode) {
var code = google.elements.keyboard.LayoutCode[i];
var name = google.elements.keyboard.getLayoutName(code);
html.push("<li><a href='#' onclick='kbd.setLayout(\"", code, "\")'>",
name, "</a></li>");
}
html.push("</ul>");
document.getElementById("menu").innerHTML = html.join('');
}
function onLoad() {
kbd = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.RUSSIAN],
['t1']);
drawMenu();
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
This is a demo for LayoutCode and getLayoutName.<br/>
<div id="menu"></div><br/>
<textarea id="t1" style="width: 600px; height: 200px;"></textarea>
</body>
</html>
O exemplo abaixo é parecido com o exemplo básico mostrado na seção Introdução. Mas tem dois objetos Keyboard para controlar dois grupos de campos de texto cada um. Há quatro campos de texto na página. Dois deles usam um teclado virtual tailandês e os outros dois usam um teclado virtual árabe.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
function onLoad() {
var kbd1 = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.THAI],
['th1', 'th2']);
var kbd2 = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.ARABIC],
['ar1', 'ar2']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Thai and Arabic<br/>
<textarea id="th1" style="width: 300px; height: 80px;"></textarea>
<textarea id="ar1" style="width: 300px; height: 80px;"></textarea>
<textarea id="th2" style="width: 300px; height: 80px;"></textarea>
<textarea id="ar2" style="width: 300px; height: 80px;"></textarea>
</body>
</html>
Você pode experimentar com um exemplo semelhante no Playground de código.
Atualmente, a API de teclado virtual suporta os seguintes layouts de teclado:
Num futuro próximo, planejamos lançar, aos poucos, mais layouts de teclado. Fique atento e verifique novamente este documento para obter informações atualizadas.
A API de teclado virtual é suportada pelo Firefox 3 e superior no Windows e no Linux, e pelo Internet Explorer 6.0 e superior no Windows (preferencialmente no Windows XP). A API de teclado virtual pode ser carregada sem erros em quase todos os navegadores, por isso você pode carregá-la com segurança antes de verificar a compatibilidade.
Se você tiver algum problema com seu código: