Modifier un champ de texte en cliquant sur un bouton radio
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:
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="<div><object width="560" height="420"><param name="movie" value="http://www.kertoonstudio.fr/components/com_vidomino/main.swf?<?php echo 'medias/' .$video->flname; ?>&skin=components/com_vidomino/SkinOverPlayStopSeekFullVol"></param><param name="allowfullscreen" value="true"></param><embed src="http://www.kertoonstudio.fr/components/com_vidomino/main.swf?<?php echo 'medias/' .$video->flname; ?>&skin=components/com_vidomino/SkinOverPlayStopSeekFullVol" type="application/x-shockwave-flash" width="560" height="420" allowfullscreen="true"></embed></object></div>" 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:
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:
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="<div><object width="560" height="420"><param name="movie" value="http://www.kertoonstudio.fr/components/com_vidomino/main.swf?<?php echo 'medias/' .$video->flname; ?>&skin=components/com_vidomino/SkinOverPlayStopSeekFullVol"></param><param name="allowfullscreen" value="true"></param><embed src="http://www.kertoonstudio.fr/components/com_vidomino/main.swf?<?php echo 'medias/' .$video->flname; ?>&skin=components/com_vidomino/SkinOverPlayStopSeekFullVol" type="application/x-shockwave-flash" width="560" height="420" allowfullscreen="true"></embed></object></div>" 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
