11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je veux utiliser une invite de message comme celle qui sert ici pour les post sur forum afin de mettre des nouvelles sur la page d'accueil de mon site...
Avec Firefox je n'ai aucun souci mais les problèmes sont sous IE6, 7 et même 8 Smiley biggol
Les balises ne s'affichent pas dans le textarea lorsque je clique sur les boutons...
POuvez vous m'aider?

Pour mon analyse c'est un problème soit du onclick, soit de la fonction addtext, ou encore le fait que j'ai plusieurs div... En effet, lorsque je lance l'expérience en utilisant les mêmes éléments sur une page qui ne contient pas l'ensemble des div, cela fonctionne quelque soit le browser.

J'espère avoir été clair, merci de vos aides à venir

Quelques parties du code:

La fonction .js :
// Vérifie la validité du champ par rapport à la regexp et sion :
//		- affiche le message d'erreur
//		- passe le focus au champ
//		- retourne false
<!--
function checkfield(champ,regexp,message) {
	var reg = new RegExp(regexp)
	if(reg.exec(champ.value)==null) {
		alert(message)
		champ.focus()
		return false
	}
	return true
}
// Ajoute le texte à la position du curseur
// dans le textearea. Merci Iubito [cligne]
function addtext(t,startTag,defaultText,endTag,replace) 
 {
  if (t.createTextRange) 
  {
		t.focus(t.caretPos);
		t.caretPos = document.selection.createRange().duplicate();
    if(t.caretPos.text.length>=0) 
    {
			//gère les espace de fin de sélection. Un double-click sélectionne le mot
			//+ un espace qu'on ne souhaite pas forcément...
			var sel = t.caretPos.text;
			var fin = '';
			while(sel.substring(sel.length-1, sel.length)==' ') 
      {
				sel = sel.substring(0, sel.length-1)
				fin += ' ';
			}
			if(replace) t.caretPos.text = startTag + sel + endTag + fin;
			else t.caretPos.text = sel + fin + startTag + defaultText + endTag;
		} else {
			t.caretPos.text = startTag+defaultText+endTag;
		}
	}
	else t.value += startTag+defaultText+endTag;
}

-->


La page .php
<?php
     include("permanents/fonctions.inc.php");
     include("permanents/connexion.inc.php");
?>
<!-- Style -->
<LINK REL="stylesheet" TYPE="text/css" HREF="styles/messages.css">
<link rel="stylesheet" href="styles/espace_admin.css" type="text/css">
<!-- Contenu -->
<div id="contenu_page_de_texte" name="contenu_page_de_texte">
<H2><img class="fleche_titre_pragraphe" src="images/fl-rougeorange18.gif">Rubrique " A la Une "</H2>
<table name="table1">
		<form method="post" action="poster_a_la_une.php" name="form1">
				<tr>
					<td align=right>Titre</td><td>
						<input name="titre_a_la_une" size=80 maxlength=100 value="<?php echo mystripslashes($_POST["titre_a_la_une"])?>"></td>
				</tr>
			<tr>
				<td align=right valign=top>Message</td><td>
					<textarea name="message_a_la_une" cols=80 rows=10><?php echo mystripslashes($_POST["message_a_la_une"])?></textarea>
				</td>
			</tr><tr>
				<td>&nbsp;</td>
				<td align=center><?php echo emoticon("form1.message_a_la_une"); ?></td>
				<td>&nbsp;</td>
			</tr><tr>
				<td>&nbsp;</td>
				<td align=center><?php echo taglist("form1.message_a_la_une"); ?></td>
			</tr><tr>
			<td>&nbsp;</td>
				<td align=center><br>
            <input type="submit" class="validation" name="envoyer" value="Envoyer" >
            <input type="button" class="validation" name="nouveau" value="Nouveau" >
				</td>
			</tr>
		</form>
</table>
</div>
<?php
if (isset($_POST['envoyer']) && $_POST['envoyer'] == 'Envoyer') {

    if ($envoi_effectue == 'false'){
        
        if (isset($_POST['titre_a_la_une']) && $_POST['titre_a_la_une'] != ''){
    
               if (isset($_POST['message_a_la_une']) && $_POST['message_a_la_une'] != ''){
                               
                    $titre_a_retenir = $_POST['titre_a_la_une'];
                    $message_a_retenir = $_POST['message_a_la_une'];
                    $envoi_effectue == 'true';                
                                                
                    //vider les champs
                    $_POST['titre_a_la_une'] = '';
                    $_POST['message_a_la_une'] = '';
    
                    // envoi des données vers BDD
                    $sql_a_inserer = 'INSERT INTO `'.$message_une.'` VALUES("", "'.date_du_jour().'", "'.mysql_escape_string($titre_a_retenir).'", "'.mysql_escape_string($message_a_retenir).'","'.mysql_escape_string($_SESSION['login']).'")';
                    mysql_query($sql_a_inserer) or die('Erreur SQL !'.$sql_a_inserer.'<br />'.mysql_error());
                    }
                    else{
                        echo 'Le message est vide';
                    }
                }
                else{
                     echo 'vous n\'avez pas mis de titre';
                     }
    }
    else{
    echo 'vous avez déjà envoé ce message !';
    }
} 


Les fonctions .php :
// Liste d'emoticons pour les formulaires
function emoticon($champ) {
	global $emoticons;
	$temp = "";
	foreach( $emoticons as $code => $image ){
$temp.= "<img  src=\"images/emoticons/".$image.".gif\" width=19 height=19 style=\"cursor:hand\""
			. " onclick=\"addtext(".$champ.",'[','".addslashes($code)."',']',false)\" alt=\"[".$code."]\">\n";
	}
	return $temp;
}

// Liste des tags pour formulaires
function taglist($champ) {
	$temp = "";
	$temp.= "<A href=\"javascript:;\" class=\"tagbox\""
		. " onclick=\"addtext(".$champ.",'[b]','...','[/b]',true)\" title=\"[b]...[/b]\">"
		. "<strong>&nbsp;B&nbsp;</strong></A>\n";
	$temp.= "<A href=\"javascript:;\" class=\"tagbox\""
		. " onclick=\"addtext(".$champ.",'[i]','...','[/i]',true)\" title=\"[i]...[/i]\">"
		. "<i>&nbsp;I&nbsp;</i></A>\n";
	$temp.= "<A href=\"javascript:;\" class=\"tagbox\""
		. " onclick=\"addtext(".$champ.",'[u]','...','[/u]',true)\" title=\"[u]...[/u]\">"
		. "<u>&nbsp;U&nbsp;</u></A>\n";
	$temp.= "<A href=\"javascript:;\" class=\"tagbox\""
		. " onclick=\"addtext(".$champ.",'[color=red]','...','[/color]',true)\" title=\"[color=red]...[/color]\">"
		. "<font color=red>&nbsp;A&nbsp;</font></A>\n";
	$temp.= "<A href=\"javascript:;\" class=\"tagbox\""
		. " onclick=\"addtext(".$champ.",'[size=4]','...','[/size]',true)\" title=\"[size=4]...[/size]\">"
		. "<font size=4><strong>&nbsp;A&nbsp;</strong></font></A>\n";
	$temp.= "<A href=\"javascript:;\" class=\"tagbox\""
		. " onclick=\"addtext(".$champ.",'[center]','...','[/center]',true)\" title=\"[center]...[/center]\">"
		. "&nbsp;Center&nbsp;</A>\n";
	$temp.= "<A href=\"javascript:;\" class=\"tagbox\""
		. " onclick=\"addtext(".$champ.",'[quote]','...','[/quote]',true)\" title=\"[quote]...[/quote]\">"
		. "&nbsp;Citation&nbsp;</A>\n";
	$temp.= "<A href=\"javascript:;\" class=\"tagbox\""
		. " onclick=\"addtext(".$champ.",'[code]','...','
',true)\" title=\"
...
\">"
. "&nbsp;Code&nbsp;</A>\n";
$temp.= "<A href=\"javascript:;\" class=\"tagbox\""
. " onclick=\"addtext(".$champ.",'','http://monsite.com/image.jpg','',true)\" title=\" ... \">"
. "&nbsp;Image&nbsp;</A>\n";
$temp.= "<A href=\"javascript:;\" class=\"tagbox\""
. " onclick=\"alert('Il suffit d\'entrer les url ou adresses email\\nnormalement pour qu\'elles soient reconnues Smiley cligne ')\" title=\"Normalement\">"
. "&nbsp;Liens&nbsp;</A>\n";
return $temp . "<br>";
}[/code]
Visiblement je n'attire pas foule Smiley decu

Voici un complément sur l'erreur que m'affiche IE:

a écrit :

Ligne 23
Caractère: 3
Erreur: Cet objet ne gère pas cette propriété ou cette méthode
Code: 0
URL: Celle de mon site local
Qu'est ce que tu as à la ligne 23 ? (Ctrl + u ou "Outils -> Source")

J'ai vu des "<A>" et des "<H2>", en xhtml les balises sont en minuscules.
Je pense que c'est la ligne 23 de mon javascript uniquement et non pas la ligne 23 de la page complète car cela me parait incohérent ...je vois cela Smiley biggrin
Bon j'ai pris exemple sur le forum alsacréation pour faire ce dont j'ai besoin.

Tous les boutons fonctionnent parfaitement à présent... sauf "lien" et "couleur" qui me mettent en fait le bbcode au complet sans effectuer le transfert ...
Modifié par Boubou57 (19 Jun 2009 - 12:46)
Bonjour, donc j'ai lamentablement repris la manière du site alsacréation et tout fonctionne a merveille sauf les balises de lien et de couleur... pouvez vous m'aider ....

<table name="table1">
		<form method="post" action="poster_a_la_une.php" name="form1">
				<tr>
					<td align=right>Titre</td><td>
						<input name="titre_a_la_une" size=80 maxlength=100 value="<?php echo mystripslashes($_POST["titre_a_la_une"])?>"></td>
				</tr>
			<tr>
				<td align=right valign=top>Message</td><td>
					<textarea name="message" cols=80 rows=10><?php echo mystripslashes($_POST["message_a_la_une"])?></textarea>
				</td>
			</tr>
      <tr>
          <td>&nbsp;</td>
    			<td class="menu_styles">
            <input type="button" class="tagbox" onclick="javascript:void(txtstyle(0));" title="[b] ... [/b]" value="gras"/>
            <input type="button" class="tagbox" onclick="javascript:void(txtstyle(2));" title="[i] ... [/i]" value="italique" />
            <input type="button" class="tagbox" onclick="javascript:void(txtstyle(4));" title="[s] ... [/s]" value="soulignement" />
            <input type="button" class="tagbox" onclick="javascript:void(txtstyle(10));" title="[img]http://...[/img]" value="image" />
            <input type="button" class="tagbox" onclick="javascript:void(txtstyle(8));" title="[url=http://...]...[/url]" value="lien" />
            <input type="button" class="tagbox" onclick="javascript:void(txtstyle(12));" title="[code]...
" value="code" />
<input type="button" class="tagbox" onclick="javascript:void(txtstyle(16));" title="..." value="citer" />
<input type="button" class="tagbox" onclick="javascript:void(txtstyle(14));" title="..." value="couleur" />
<select name="switch_color" class="color" onchange="javascript:void(insertElt('[#'+this.form.switch_color.options[this.form.switch_color.selectedIndex].value+']'))">
<option style="color:black;" value="black">Noir</option>
<option style="color:darkred;" value="darkred">Rouge foncé</option>
<option style="color:red;" value="red">Rouge</option>
<option style="color:orange;" value="orange">Orange</option>
<option style="color:brown;" value="brown">Marron</option>
<option style="color:yellow;" value="yellow">Jaune</option>
<option style="color:green;" value="green">Vert</option>
<option style="color:olive;" value="olive">Olive</option>
<option style="color:cyan;" value="cyan">Cyan</option>
<option style="color:blue;" value="blue">Bleu</option>
<option style="color:darkblue;" value="darkblue">Bleu foncé</option>
<option style="color:indigo;" value="indigo">Indigo</option>
<option style="color:violet;" value="violet">Violet</option>
</select>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td align=center><br>
<input type="submit" class="validation" name="envoyer" value="Envoyer" >
<input type="button" class="validation" name="nouveau" value="Nouveau" >
</td>
</tr>
</form>
</table>
[/code]

var style = new Array('b','/b','i','/i','s','/s','email','/email','url=','/url','img','/img','code','/code','#','/#','quote','/quote');
lien="http://";

function MM_findObj(n, d) {
	var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
		d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
	}
	if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
	for(i=0;!x&&d.layers&&i>d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function storeCaret (textEl) {
	if (textEl.createTextRange) 
		textEl.caretPos = document.selection.createRange().duplicate();
}

function insertAtCaret(textEl, text) {
	if (textEl.createTextRange && textEl.caretPos) {
		var caretPos = textEl.caretPos;
		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
	}
}

function insertInCaret(textEl, text, text2) {
	if (textEl.createTextRange && textEl.caretPos) {
		var caretPos = textEl.caretPos;
		selectedtext = caretPos.text
		caretPos.text =	caretPos.text.charAt(caretPos.text.length - 1) == '' ? text + '' : text;
		caretPos.text = caretPos.text + selectedtext + text2
	}
}

function txtstyle(id) {
	MM_findObj('message').focus();
	if (MM_findObj('message').createTextRange && MM_findObj('message').caretPos) {
		var caretPos = MM_findObj('message').caretPos;
		if (caretPos.text.length>0) {
			if (id!=8) {
				insertInCaret(MM_findObj('message'),"["+style[id]+"]","["+style[id+1]+"]")
			} else {
				geturl = prompt("Veuillez entrer l'URL",'http://')
				insertInCaret(MM_findObj('message'),"["+style[id]+geturl+"]","["+style[id+1]+"]")
			}
		} else {
			if ( (countbalise('['+style[id],'message')+countbalise('['+style[id+1],'message'))%2 == 0) {
				if (id!=8) {
					insertAtCaret(MM_findObj('message'),"["+style[id]+"]")
				} else {
					geturl = prompt("Veuillez entrer l'URL",'http://')
					insertAtCaret(MM_findObj('message'),"["+style[id]+geturl+"]")
				}
			} else {
				insertAtCaret(MM_findObj('message'),"["+style[id+1]+"]")
			}
			MM_findObj('message').focus()
		}
	} else {
		if((countbalise('['+style[id],'message')+countbalise('['+style[id+1],'message'))%2 == 0) {
			MM_findObj('message').value=MM_findObj('message').value+'['+style[id]+']';
		} else {
			MM_findObj('message').value=MM_findObj('message').value+'['+style[id+1]+']';
		}
		MM_findObj('message').focus()
	}
}

function countbalise(b,ch) {
	count = 0;
	pos = MM_findObj(ch).value.indexOf(b);
	while ( pos != -1 ) {
		count++;
		pos = MM_findObj(ch).value.indexOf(b,pos+1);
	}
	return count;
}

function insertElt(MyString) {
	MM_findObj('message').focus();
	if ((MM_findObj('message').createTextRange) && (MM_findObj('message').caretPos)) {
		var caretPos = MM_findObj('message').caretPos;
		if (caretPos.text.length>0)
			insertInCaret(MM_findObj('message'),MyString,"");
		else
			insertAtCaret(MM_findObj('message'),MyString);
	} else {
		MM_findObj('message').value=MM_findObj('message').value+MyString;
		MM_findObj('message').focus()
	}
}

function insertTag(MyString) {
	MM_findObj('message').focus();
	if (MM_findObj('message').createTextRange && MM_findObj('message').caretPos) {
		var caretPos = MM_findObj('message').caretPos;
		if (caretPos.text.length>0) {
			insertInCaret(MM_findObj('message'),"["+MyString+"]","[/"+MyString+"]")
		} else {
			if ( (countbalise('['+MyString,'message')+countbalise('[/'+MyString,'message'))%2 == 0) {
				insertAtCaret(MM_findObj('message'),"["+MyString+"]")
			} else {
				insertAtCaret(MM_findObj('message'),"[/"+MyString+"]")
			}
			MM_findObj('message').focus()
		}
	} else {
		if((countbalise('['+MyString,'message')+countbalise('[/'+MyString,'message'))%2 == 0) {
			insertAtCaret(MM_findObj('message'),"["+MyString+"]")
		} else {
			insertAtCaret(MM_findObj('message'),"[/"+MyString+"]")
		}
		MM_findObj('message').focus()
	}
}

function switchdiv(divid,state) {
	var divObj = null;
	if (document.getElementById) {
		divObj = document.getElementById(divid);
		if(state) divObj.style.display = "block";
		else divObj.style.display = "none";
	} else if(document.all) {
		divObj = document.all(divid);
		if(state) divObj.style.display = "block";
		else divObj.style.display = "none";
	} else if (document.layers) {
		divObj = document.layers[divid];
		if(state) divObj.visibility = "visible";
		else divObj.visibility = "hidden";
	}
}

function inputenable(id,state,defaut) {
	var divObj = null;
	if (document.getElementById) {
		divObj = document.getElementById(id);
	} else if(document.all) {
		divObj = document.all(id);
	} else if (document.layers) {
		divObj = document.layers[id];
	}
	if(state) {
		divObj.removeAttribute("readonly");
	} else {
		divObj.setAttribute("readonly","readonly");
		if(defaut) divObj.value=defaut;
	}
}
[/i][/i]