OnFocus ne marche pas...

belgikoi Messages postés 44 Date d'inscription   Statut Membre Dernière intervention   -  
belgikoi Messages postés 44 Date d'inscription   Statut Membre Dernière intervention   -
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

Réponse 1 / 6
le père
 
Bonjour

javascript est sensible à la casse
Ecris "function" SANS majuscule
0
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
Réponse 2 / 6
belgikoi Messages postés 44 Date d'inscription   Statut Membre Dernière intervention   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
Réponse 3 / 6
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
Réponse 4 / 6
belgikoi Messages postés 44 Date d'inscription   Statut Membre Dernière intervention   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

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

Posez votre question
Réponse 5 / 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
Réponse 6 / 6
belgikoi Messages postés 44 Date d'inscription   Statut Membre Dernière intervention   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