Modifier un champ de texte en cliquant sur un bouton radio

**vikti** · 24/10/2007, 10h30

Bonjour,

Je voudrais recréer la fonctionnalité de lecteur exportable du site de dailymotion.
J'ai donc un champ de texte avec le code HTML et j'ai trois boutons radios pour modifier le code afin d'avoir plusieurs tailles de lecteur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<form id="form1" name="form1" method="post" action="">
  <input type="text" class="text" id="video_player_embed_code_text" onclick="this.select()" value="&lt;div&gt;&lt;object width=&quot;560&quot; height=&quot;420&quot;&gt;&lt;param name=&quot;movie&quot; value=&quot;http://www.kertoonstudio.fr/components/com_vidomino/main.swf?<?php echo 'medias/' .$video->flname; ?>&amp;skin=components/com_vidomino/SkinOverPlayStopSeekFullVol&quot;&gt;&lt;/param&gt;&lt;param name=&quot;allowfullscreen&quot; value=&quot;true&quot;&gt;&lt;/param&gt;&lt;embed src=&quot;http://www.kertoonstudio.fr/components/com_vidomino/main.swf?<?php echo 'medias/' .$video->flname; ?>&amp;skin=components/com_vidomino/SkinOverPlayStopSeekFullVol&quot; type=&quot;application/x-shockwave-flash&quot; width=&quot;560&quot; height=&quot;420&quot; allowfullscreen=&quot;true&quot;&gt;&lt;/embed&gt;&lt;/object&gt;&lt;/div&gt;" size="50" readonly="readonly" />
 
  <input onclick="javascript:changeSize(1);" name="embedSize" type="radio" class="resize size_200" value="small" /> 
                    	petit
 
  <input onclick="javascript:changeSize(2);" type="radio" name="embedSize" value="medium" class="resize size_425" checked="checked" /> moyen
 
  <input onclick="javascript:changeSize(3);" type="radio" name="embedSize" value="big" class="resize size_520" /> grand
 
</form>

Pour cela, j'utilise ma fonction changeSize:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function changeSize(size){
	var str = document.form1.video_player_embed_code_text.value;
 
	switch(size){
		case 1:	var width = new RegExp( 'width="[0-9]{3}"', "g" ) ;
				var height = new RegExp( 'height="[0-9]{3}"', "g" );
				document.form1.video_player_embed_code_text.value = str.replace(width,'width="260"');
				document.form1.video_player_embed_code_text.value = str.replace(height,'height="195"');
 				break;
 
		case 2:	var width = new RegExp( 'width="[0-9]{3}"', "g" ) ;
				var height = new RegExp( 'height="[0-9]{3}"', "g" );
				document.form1.video_player_embed_code_text.value = str.replace(width,'width="400"');
				document.form1.video_player_embed_code_text.value = str.replace(height,'height="300"');
				break;
 
		case 3:	var width = new RegExp( 'width="[0-9]{3}"', "g" ) ;
				var height = new RegExp( 'height="[0-9]{3}"', "g" );
				document.form1.video_player_embed_code_text.value = str.replace(width,'width="560"');
				document.form1.video_player_embed_code_text.value = str.replace(height,'height="420"');
				break;
	}
}

je fais une recherche avec RegExp() sur la chaîne width=" et height="
Mes regExp marchent trés bien séparement. Mais une fois l'un à la suite de l'autre, il se pose un problème...
En effet Javascript agit de la facon suivante:
-il modifie une première fois le champ <input > avec le premier regExp width
-il rétablit le champ input à sa valeur de départ
-il modifie une deuxième fois le champ <input > avec la deuxième regExp height

Au final c'est comme si il ne prenait en compte que mon deuxième regExp....

Comment éviter que Javascript réninitialise le texte entre les deux manipulations???

voici le code complet de ma page de test:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
  <input type="text" class="text" id="video_player_embed_code_text" onclick="this.select()" value="&lt;div&gt;&lt;object width=&quot;560&quot; height=&quot;420&quot;&gt;&lt;param name=&quot;movie&quot; value=&quot;http://www.kertoonstudio.fr/components/com_vidomino/main.swf?<?php echo 'medias/' .$video->flname; ?>&amp;skin=components/com_vidomino/SkinOverPlayStopSeekFullVol&quot;&gt;&lt;/param&gt;&lt;param name=&quot;allowfullscreen&quot; value=&quot;true&quot;&gt;&lt;/param&gt;&lt;embed src=&quot;http://www.kertoonstudio.fr/components/com_vidomino/main.swf?<?php echo 'medias/' .$video->flname; ?>&amp;skin=components/com_vidomino/SkinOverPlayStopSeekFullVol&quot; type=&quot;application/x-shockwave-flash&quot; width=&quot;560&quot; height=&quot;420&quot; allowfullscreen=&quot;true&quot;&gt;&lt;/embed&gt;&lt;/object&gt;&lt;/div&gt;" size="50" readonly="readonly" />
 
                    	<input onclick="javascript:changeSize(1);" name="embedSize" type="radio" class="resize size_200" value="small" /> 
                    	petit
 
  <input onclick="javascript:changeSize(2);" type="radio" name="embedSize" value="medium" class="resize size_425" checked="checked" /> moyen
 
  <input onclick="javascript:changeSize(3);" type="radio" name="embedSize" value="big" class="resize size_520" /> grand
 
</form>
<script type="text/javascript">
function changeSize(size){
	var str = document.form1.video_player_embed_code_text.value;
 
	switch(size){
		case 1:	var width = new RegExp( 'width="[0-9]{3}"', "g" ) ;
				var height = new RegExp( 'height="[0-9]{3}"', "g" );
				document.form1.video_player_embed_code_text.value = str.replace(height,'height="195"');
				document.form1.video_player_embed_code_text.value = str.replace(width,'width="260"');
 				break;
 
		case 2:	var width = new RegExp( 'width="[0-9]{3}"', "g" ) ;
				var height = new RegExp( 'height="[0-9]{3}"', "g" );
				document.form1.video_player_embed_code_text.value = str.replace(height,'height="300"');
				document.form1.video_player_embed_code_text.value = str.replace(width,'width="400"');
				break;
 
		case 3:	var width = new RegExp( 'width="[0-9]{3}"', "g" ) ;
				var height = new RegExp( 'height="[0-9]{3}"', "g" );
				document.form1.video_player_embed_code_text.value = str.replace(width,'width="560"');
				document.form1.video_player_embed_code_text.value = str.replace(height,'height="420"');
				break;
	}
}
</script>
</body>
</html>

Merci

**vikti** · 24/10/2007, 15h20

C'est résolu:

le bon code de la fonction est:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function changeSize(size){  
	var str = document.form1.video_player_embed_code_text; 	  
	switch(size) 
	{  
		case 1:	var width = new RegExp( 'width="[0-9]{3}"', "g" ) ;  
					var height = new RegExp( 'height="[0-9]{3}"', "g" );  
					str.value =  str.value.replace(height,'height="195"');  
					str.value =  str.value.replace(width,'width="260"');  
 				break;  
 
		case 2:	var width = new RegExp( 'width="[0-9]{3}"', "g" ) ;  
				var height = new RegExp( 'height="[0-9]{3}"', "g" );  
				str.value = str.value.replace(height,'height="300"');  
				str.value = str.value.replace(width,'width="400"');  
				break;  
		case 3:	var width = new RegExp( 'width="[0-9]{3}"', "g" ) ;  
				var height = new RegExp( 'height="[0-9]{3}"', "g" );  
				str.value =  str.value.replace(width,'width="560"');  
				str.value =  str.value.replace(height,'height="420"');  
				break;  
	}  
}

Modifier un champ de texte en cliquant sur un bouton radio

JavaScript

Discussions similaires

Partager

Partager