OnFocus ne marche pas...

Bonjour,

J'ai un 'module' TinyMCE https://www.tiny.cloud/
En fait, il s'agit d'un textarea.
J'aimerai que lorsque je clique dessus (donc, un onFocus), le contenu du textarea soit modifié.
Donc, voilà mon code HTML:
<textarea id="postContent" name="postContent" rows="20" style="width:100%" onFocus="modification();">

Et mon JS:
Function modification () {
document.getElementById('postContent').value= 'test';
}

Or, rien ne se déclenche, j'ai regardé avec la console JS de Chrome: rien, il ne m'affiche même pas d'erreur... (je tiens à signaler que j'ai bien activé mon JS sur mon navigateur ^^)
Savez-vous d'où vient l'erreur ?

6 réponses

  1. Bonjour

    javascript est sensible à la casse
    Ecris "function" SANS majuscule
    1. slt,
      soit prudent avec le javascript

      et surtout la console d'erreur du navigateur est là pour t'aider à trouver tes erreurs javascript
  2. Euh, oui, désolé, j'ai mal recopié, j'ai bien mis 'function' sans majuscules.
    Mais donc, comme je le disais, la console ne m'indique rien...
    1. désolé, j'ai mal recopié,
      S'il te plaît, ne recopie pas, fais un copier - coller
      Peux-tu donner toute la page ? Car il est probable que ton erreur vienne d'ailleurs que les quelques lignes que tu donnes (balise pas fermée...)
      1. OK.
        Donc, voilà le HTML correspondant:

        <!DOCTYPE HTML>
        <html>
        <head>
        <meta charset="utf-8">
        <title>Konquest - Lecture message</title>
        <script src="../../scripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
        <script type="text/xml">
        <!--
        <oa:widgets>
          <oa:widget wid="2204022" binding="#postContent" />
        </oa:widgets>
        -->
        </script>
        <script type="text/javascript" src="../../javascript/AjaxFunction.js"></script>
        </head>
        <body>
        <form action="envoiMessage.php" method="post" name="reponse">
          <script type="text/javascript">
        // BeginOAWidget_Instance_2204022: #postContent
        
        	tinyMCE.init({
        		// General options
        		mode : "exact",
        		elements : "postContent",
        		theme : "advanced",
        		skin : "default",
        		plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
        
        		// Theme options
        		theme_advanced_buttons1 : "bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,undo,redo,link,unlink,anchor,",
        		theme_advanced_buttons2 : "",
        		theme_advanced_buttons3 : "",
        		theme_advanced_buttons4 : "",
        		theme_advanced_toolbar_location : "bottom",
        		theme_advanced_toolbar_align : "left",
        		theme_advanced_statusbar_location : "none",
        		theme_advanced_resizing : false,
        
        		// Example content CSS (should be your site CSS)
        		content_css : "/css/editor_styles.css",
        
        		// Drop lists for link/image/media/template dialogs, You shouldn't need to touch this
        		template_external_list_url : "/lists/template_list.js",
        		external_link_list_url : "/lists/link_list.js",
        		external_image_list_url : "/lists/image_list.js",
        		media_external_list_url : "/lists/media_list.js",
        
        		// Style formats: You must add here all the inline styles and css classes exposed to the end user in the styles menus
        		style_formats : [
        			{title : 'Bold text', inline : 'b'},
        			{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
        			{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
        			{title : 'Example 1', inline : 'span', classes : 'example1'},
        			{title : 'Example 2', inline : 'span', classes : 'example2'},
        			{title : 'Table styles'},
        			{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
        		]
        	});
        		
        // EndOAWidget_Instance_2204022
          </script>
          <!-- Textarea gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
          <textarea id="postContent" name="postContent" rows="20" style="width:100%" onFocus="reponse();">
          
          <?php
        //On se connecte à la base de données
        include('../../phpscript/connect.php');
        session_start();
        $idJoueur = $_SESSION['id'];
        $pseudoJoueur = $_SESSION['pseudoJoueur'];
        
        //On vérifie l'id du message
        if (isset($_GET['id']))
        {
        	//Il y a bien un ID, on vérifie qu'il renvoie vers un message accessible depuis le joueur
        	$SQL = "SELECT * FROM message, joueur WHERE message.idDestinataire = ".$_SESSION['id']." AND message.idMessage = ".$_GET['id']." AND message.idExpediteur = joueur.idJoueur";
        	$QUERY = mysql_query($SQL,$connexion);
        	$ligne = mysql_fetch_assoc($QUERY);
        	$idMessage = $ligne['idMessage'];
        	$sujet = $ligne['SujetMessage'];
        	$message = $ligne['CorpsMessage'];
        	$date = $date = substr($ligne['DateEnvoi'], 8, 2).'/'.substr($ligne['DateEnvoi'], 5, 2).'/'.substr($ligne['DateEnvoi'], 0, 4).' ('.substr($ligne['DateEnvoi'], -8).')';
        	$expediteur = $ligne['PseudoJoueur'];
        	$idexpediteur = $ligne['idJoueur'];
        	echo "Sujet: ".$sujet;
        	echo "<br>Expediteur: ".$expediteur;
        	echo "<br>Heure d'envoi du message: ".$date;
        	echo '<hr>';
        	echo $message;
        	//On modifie l'état en Lu
        	$SQL2 = 'UPDATE message SET Lu = 1 WHERE idMessage = '.$_GET['id'];
        	$QUERY2 = mysql_query($SQL2, $connexion);
        }
        else
        {
        	//Aucun ID passé
        	
        }
        ?>
          </textarea>
          <input type="button" value="Supprimer message" onClick="request('actMessage.php?id='+<?php echo $idMessage;?>+'&code=1', 'infoMessage');"> <input type="button" value="Marquer comme non lu" onClick="request('actMessage.php?id='+<?php echo $idMessage;?>+'&code=2', 'infoMessage');">
          <input type="hidden" name="sujet" id="sujet" value="<?php echo 'RE: '.$sujet; ?>">
          <input type="hidden" name="idDest" id="idDest" value="<?php echo $idexpediteur; ?>">
        <input type="submit" value="Répondre" id="response">
        </form>
        <div id="infoMessage"></div>
        </body>
        </html>


        Et mon 'AjaxFunction.js:
        function getXMLHttpRequest() {
        	var xhr = null;
        	
        	if (window.XMLHttpRequest || window.ActiveXObject) {
        		if (window.ActiveXObject) {
        			try {
        				xhr = new ActiveXObject("Msxml2.XMLHTTP");
        			} catch(e) {
        				xhr = new ActiveXObject("Microsoft.XMLHTTP");
        			}
        		} else {
        			xhr = new XMLHttpRequest(); 
        		}
        	} else {
        		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        		return null;
        	}
        	
        	return xhr;
        }
        
        function request(url,cadre) { 
        	var XHR = getXMLHttpRequest();
        	XHR.open("GET",url, true); 
        	XHR.onreadystatechange = function() {
        		if (XHR.readyState == 4 && XHR.status == 200) {
        			document.getElementById(cadre).innerHTML = XHR.responseText ; 
        		}
        		else {
        			cadre.innerHTML = '<img src="../../content/loading.gif" />';
        		}
        	}
        
        	XHR.send(null);	
        	return; 
        }
        
        function reponse() {
               alert('test');
        }


        Voilà, j'ai souligné le code qui devrait se déclencher.
        1. chez moi elle fonctionne très bien.
          essaye de mettre le onfucus avec "f" et non le onFocus avec "F"

          <script language="javascript" type="text/javascript">

          function modification () {
          document.getElementById('toi').value= 'test';
          }
          </script>

          <form id="form1" name="form1" method="post" action="">
          <textarea name="toi" id="toi" cols="45" rows="5" onfocus="modification ();">blablabla...
          </textarea>
          </form>
          1. Je vais essayer, mais j'ai peur que ce qui cloche, c'est pas mon code, mais celui généré par TinyMCE (celui tout en anglais).
            Tu as testé avec ce module ? Ou juste avec un textarea ?