OnFocus ne marche pas...

belgikoi Messages postés 52 Statut Membre -  
belgikoi Messages postés 52 Statut Membre -
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. le père
     
    Bonjour

    javascript est sensible à la casse
    Ecris "function" SANS majuscule
    0
    1. NDOUKI Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   12
       
      slt,
      soit prudent avec le javascript

      et surtout la console d'erreur du navigateur est là pour t'aider à trouver tes erreurs javascript
      0
  2. belgikoi Messages postés 52 Statut Membre 6
     
    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...
    0
  3. le père
     
    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...)
    0
  4. belgikoi Messages postés 52 Statut Membre 6
     
    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.
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. NDOUKI Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   12
     
    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>
    0
  7. belgikoi Messages postés 52 Statut Membre 6
     
    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 ?
    0