Mise a jour d'une div a partir textearea

**voyageurdumonde** · 24/03/2011, 03h46

Bonjour,

J'ai recopie le code de google api translate mais je ne sais pas comment faire pour ecrire un texte dans un textearea par exemple, et que ce texte remplace "Hola, me alegro mucho de verte" par le mien et qui sera immediatement traduit sans recharger la page.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google AJAX Language API Sample</title>
        <script src="https://www.google.com/jsapi?key=AIzajr2m9v91c&q"></script>
        <script type="text/javascript">
        google.load("language", "1");
        function initialize() {
            var content = document.getElementById('content');
            // Setting the text in the div.
            content.innerHTML = '<div id="text" >Hola, me alegro mucho de verte.<\/div><div id="translation"/>';
            // Grabbing the text to translate
            var text = document.getElementById("text").innerHTML;
            // Translate from Spanish to English, and have the callback of the request
            // put the resulting translation in the "translation" div.
            // Note: by putting in an empty string for the source language ('es') then the translation
            // will auto-detect the source language.
            google.language.translate(text, 'es', 'en', function(result) {         var translated = document.getElementById("translation");         if (result.translation) {           translated.innerHTML = result.translation;         }       });     }     google.setOnLoadCallback(initialize);
            </script>
    </head>
    <body style="font-family: Arial;border: 0 none;">
        <div id="content">Loading...</div>
    </body>
</html>

Merci de votre aide

**NoSmoking** · 24/03/2011, 15h15

Bonjour,
un canevas de réponse

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
google.load("language", "1");
//function initialize() {
function translate(){
  // Grabbing the text to translate
  var text = document.getElementById("text").value;//innerHTML;
  // appel methode   
  google.language.translate(text, 'es', 'en', function (result) {
    var oDest = document.getElementById("div_resultat");
    var Error = result.error;
    // traitement de l'erreur
    if( Error){
      oDest.innerHTML = Error.code +'<br>' +Error.message;
    }
    // affichage resultat    
    else{
      oDest.innerHTML = result.translation;
    }
  });
}
//google.setOnLoadCallback(initialize);
</script>

et la partie HTML correspondante

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<body>
<textarea id="text">Hola, me alegro mucho de verte.</textarea>
<br /><button onclick="translate();">Traduire</button>
<div id="div_resultat">Loading...</div>
</body>

il te reste à affiner, et mettre éventuellement des paramètres à la fonction.

**voyageurdumonde** · 24/03/2011, 17h10

Salut NoSmoking,

La traduction peut-elle se faite automatiquement sans que l'utilisateur ai a appuyer sur un bouton?

Merci

**NoSmoking** · 24/03/2011, 18h27

Envoyé par voyageurdumonde

Salut NoSmoking,

La traduction peut-elle se faite automatiquement sans que l'utilisateur ai a appuyer sur un bouton?

Merci

si tu entends par là lors de la frappe, il suffit de mettre la fonction sur l'événement onkeyup de la TEXAREA

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<textarea id="text" onkeyup="translate();">Hola, me alegro mucho de verte.</textarea>

tu n'auras peut être pas toujours de l'instantané

**voyageurdumonde** · 24/03/2011, 22h19

Excellent c'est exactement ce que je voulais.
Merci beaucoup

Mise a jour d'une div a partir textearea [Autres]

APIs Google

Discussions similaires

Partager

Partager