Sujet Précédent Sujet Suivant

Javascript et innerHTML.

Fermé
Pseudo.... - Modifié par Pseudo.... le 13/11/2012 à 18:55
 Pseudo.... - 14 nov. 2012 à 23:33
Bonjour, (j'ai posté là parce que je ne trouvais pas de catégorie Javascript, enfin passons)


J'essaye d'ajouter dynamiquement des balises html (notemment <br/>), j'essaye avec la propriété innerHTML de cette manière : 




var cmd = document.getElementById('cmd'); 
cmd.innerHTML += '<br />';



mais bizarrement, sous firefox et chrome, la balise html n'est pas executé, elle est juste affiche en texte "<br />" et du coup pas moyen de faire de retour à la ligne.
Par contre sur IE9 ça marche...


J'ai cru comprendre sur certains sites que la propriété innerHTML n'était pas une très bonne idée pour ajouter des balises html, mais je ne sais pas comment faire autrement.



Merci d'avance

5 réponses

Réponse 1 / 5
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
13 nov. 2012 à 19:14
J'ai eu un souci similaire, il me semble qu'en remplaçant innerHTML par innerText, ça corrige le problème.
A tester !
0
Pseudo....
13 nov. 2012 à 19:43
Salut, j'ai testé et c'est pire, cela n'affiche plus rien !
A croire que javascript ne m'aime pas x)
0
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
13 nov. 2012 à 19:50
je peux avoir plus de code pour tester?
0
Pseudo....
13 nov. 2012 à 19:59
Oui bien sur !
Le voici (en fait j'essaye de faire une sorte de console en ligne 

<!doctype html>
<html>
        <head>
                <title>web-js-dos</title>
	</head>

<body>

console:
<textarea readonly id="cmd" rows=20 style="overflow:auto; width:100%; height:100%; background-color: #000; color: white; font-family: Courier New; border: none;">
> </textarea>

<script type="text/javascript">
		var line = '';
		var cmd = document.getElementById('cmd');
		
		document.addEventListener('keydown', function(e) {

		    var key = String.fromCharCode(e.keyCode);

		    if (e.keyCode == '8') { // Pour gérer la touche delete, marche pas pour l'instant ^^

		    	alert(cmd.innerHTML[cmd.innerHTML.length-1]);
		    	cmd.innerHTML[cmd.innerHTML.length-1] = '';
				
		    }
		    else if (e.keyCode == '13') {
		    	cmd.innerHTML += '<br/>' + processLine(line) + '> ';
		    	line = '';
			}
		    else
		    {
		    	line += key;
		    	cmd.innerHTML += key;
			}
		
		}, false);
		
		
		function processLine(l){
			var r = '';
			switch(l){
					case "VER":
					case "ver":
						r = 'Console en ligne<br/>';
						break;
					case "HELP":
					case "help":
						r = 'Pas d'aide possible pour l'instant<br/>';
						break;
					default:
						r = 'Syntax Error<br/>';
			}
			
			return r;
		}
</script>

</body>
</html>
0
Réponse 2 / 5
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
Modifié par Lord Zero le 13/11/2012 à 20:21
Tu as oublié le caractère d'échappement \ 
r = 'Pas d'aide possible pour l'instant<br/>';


ce qui donne : 
r = 'Pas d\'aide possible pour l\'instant<br/>';


Je cherche toujours une solution pour le reste, si je comprends bien, le fait de mettre '<br/>' en texte doit être interprété comme un saut de ligne, il est vrai que ff ne comprend pas ça.
Développeur VB6, VBS, VBA, VB.NET, C#, HTML, PHP, JAVASCRIPT, SQL.
0
Réponse 3 / 5
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
13 nov. 2012 à 20:30
En fait tu te complique la vie je crois en faisant un saut de ligne \n dans le texte le résultat est le même et fonctionnel sous ff

essaie ce code 

<!doctype html>
<html>
        <head>
                <title>web-js-dos</title>
	</head>

<body>

console:
<textarea readonly id="cmd" rows=20 style="overflow:auto; width:100%; height:100%; background-color: #000; color: white; font-family: Courier New; border: none;">
 </textarea>

<script type="text/javascript">
		var line = '';
		var cmd = document.getElementById('cmd');
		
		document.addEventListener('keydown', function(e) {

		    var key = String.fromCharCode(e.keyCode);

		    if (e.keyCode == '8') { // Pour gérer la touche delete, marche pas pour l'instant ^^

		    	alert(cmd.innerHTML[cmd.innerHTML.length-1]);
		    	cmd.innerHTML[cmd.innerHTML.length-1] = '';
				
		    }
		    else if (e.keyCode == '13') {
		    	cmd.innerHTML += processLine(line) + '> ';
		    	line = '';
			}
		    else
		    {
		    	line += key;
		    	cmd.innerHTML += key;
			}
		
		}, false);
		
		
		function processLine(l){
			var r = '';
			switch(l){
					case "VER":
					case "ver":
						r = 'Console en ligne \n';
						break;
					case "HELP":
					case "help":
						r = 'Pas d\'aide possible pour l\'instant \n';
						break;
					default:
						r = '\n Syntax Error \n';
			}
			
			return r;
		}
</script>

</body>
</html>
0
Réponse 4 / 5
Pseudo....
13 nov. 2012 à 20:39
Oui tu as raison le \n marche effectivement, et j'ai pas vraiment besoin d'autre balise à ajouter... Du coup problème résolu on peut dire.

Par contre, j'aimerais savoir comment je pourrais supprimer la dernière lettre du texte en appuyant sur la touche delete, j'ai essayé comme ça :
cmd.innerHTML[cmd.innerHTML.length-1] = '';

mais ça ne change rien....

Une idée ?
0
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
13 nov. 2012 à 21:04
en fait je suis pas sûre que ça marche correct sous ie mon code, as tu tester?
0
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
13 nov. 2012 à 21:11 
<!doctype html>
<html>
        <head>
                <title>web-js-dos</title>
                <script type="text/javascript">
<!--
var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera",
			versionSearch: "Version"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();

// -->
</script>
	</head>

<body>

console:
<textarea readonly id="cmd" rows=20 style="overflow:auto; width:100%; height:100%; background-color: #000; color: white; font-family: Courier New; border: none;">
> </textarea>

<script type="text/javascript">
		var line = '';
		var cmd = document.getElementById('cmd');
		
		document.addEventListener('keydown', function(e) {

		    var key = String.fromCharCode(e.keyCode);

		    if (e.keyCode == '8') { // Pour gérer la touche delete, marche pas pour l'instant ^^

		    	alert(cmd.innerHTML[cmd.innerHTML.length-1]);
		    	cmd.innerHTML[cmd.innerHTML.length-1] = '';
				
		    }
		    else if (e.keyCode == '13') {
		    if (BrowserDetect.browser =="Explorer") {
		   		cmd.innerText +=  processLine(line) + '> ';
		   		} else {
		    	cmd.innerHTML +=  processLine(line) + '> ';
		    	}
		    	line = '';
			}
		    else
		    {
		    	line += key;
		    	if (BrowserDetect.browser =="Explorer") {
		    	cmd.innerText += key;
		    	} else {
		    	cmd.innerHTML += key;
		    	}
			}
		
		}, false);
		
		
		function processLine(l){
			var r = '';
			switch(l){
					case "VER":
					case "ver":
						r = '=\n Console en ligne \n';
						break;
					case "HELP":
					case "help":
						r = '\n Pas d\'aide possible pour l\'instant \n';
						break;
					default:
						r = '\n Syntax Error \n';
			}
			
			return r;
		}
</script>

</body>
</html>


en détectant le navigateur ça résout le problème
0
Pseudo....
14 nov. 2012 à 01:42
Oui c'est bon ça marche, maintenant il ne me reste plus que le problème pour gerer la touche delete.
Merci beaucoup ! ^^
0

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

Posez votre question
Réponse 5 / 5
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
14 nov. 2012 à 03:09
j'ai trouvé ! 

<!doctype html>
<html>
        <head>
                <title>web-js-dos</title>
                <script type="text/javascript">
<!--
var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera",
			versionSearch: "Version"
		},
		{
			string: navigator.vendor,

			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();

// -->
</script>
	</head>

<body>

console:
<textarea readonly id="cmd" rows=20 style="overflow:auto; width:100%; height:100%; background-color: #000; color: white; font-family: Courier New; border: none;">
> </textarea>

<script type="text/javascript">
		var line = '';
		var cmd = document.getElementById('cmd');
		
		document.addEventListener('keydown', function(e) {

		    var key = String.fromCharCode(e.keyCode);

		    if (e.keyCode == '8') { // Pour gérer la touche delete, marche pas pour l'instant ^^

		    	var myStr = cmd.innerHTML     
				var strLen = myStr.length;
				myStr = myStr.slice(0,strLen-1);
				cmd.innerHTML = myStr;

				
		    }
		    else if (e.keyCode == '13') {
		    if (BrowserDetect.browser =="Explorer") {
		   		cmd.innerText +=  processLine(line) + '> ';
		   		} else {
		    	cmd.innerHTML +=  processLine(line) + '> ';
		    	}
		    	line = '';
			}
		    else
		    {
		    	line += key;
		    	if (BrowserDetect.browser =="Explorer") {
		    	cmd.innerText += key;
		    	} else {
		    	cmd.innerHTML += key;
		    	}
			}
		
		}, false);
		
		
		function processLine(l){
			var r = '';
			switch(l){
					case "VER":
					case "ver":
						r = '=\n Console en ligne \n';
						break;
					case "HELP":
					case "help":
						r = '\n Pas d\'aide possible pour l\'instant \n';
						break;
					default:
						r = '\n Syntax Error \n';
			}
			
			return r;
		}
</script>

</body>
</html>
0
Pseudo....
14 nov. 2012 à 23:33
Merci ça marche ! C'est génial !
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
java activée mais ne fonctionne pas !
chating -
chating -

4 réponses
afficher un tableau JS en HTML
jibouz12 -
jibouz12 -

3 réponses