Gerer le ctrl + S en javascript

Version imprimable

06/07/2011, 17h30
K-LiBR3

Gerer le ctrl + S en javascript

Bonjour,

Je saisqu'on peut assigné une touche à une fonction en javascript et je sais aussi que le ctrl + S est réserver au navigateur pour enregistrer la page en cour.

Mais est il possible que j’écrase cette fonction pour que, quand on fasse ctrl + S, mon site exécute une fonction particulière ?

merci d'avance.
07/07/2011, 09h06
skeud

non
07/07/2011, 13h33
K-LiBR3

Citation:

Envoyé par skeud

non

pourquoi non ?

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
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
 
<script type='text/javascript'>
function remplaceCtrlTouche(e, toucheInterdite, fonction){
        var key;
        var CtrlDown;
 
        if(window.event) {
                key = window.event.keyCode;     //IE
                CtrlDown=(window.event.ctrlKey)?true:false;
        			}
        else  {
                key = e.which;     //firefox
                CtrlDown=(e.ctrlKey)?true:false;
                }
 
        if(CtrlDown) {        //La touche Ctrl à été enfoncée, verfication de combinaison
			//verification de casse
			if(toucheInterdite.toLowerCase() === String.fromCharCode(key).toLowerCase()){
					// ici lancement de la fonction de substitution
                 fonction()
                 // annulation de la fonction originale
                 return false;
                 }
           }
        return true;
}
 
function maRecherchePerso(){
alert('faut pas vouloir copier')
}
 
</script>
</head>
 
<body onkeydown="return this.onkeypress();" onkeypress="return remplaceCtrlTouche(event,'A', maRecherchePerso)">
 
</body>
 
</html>

ce code fonctionne avec A
mais pas avec S
le ctrl+S est géré en amont ... donc inaccessible pour JS

07/07/2011, 14h10
Bovino

Citation:

Envoyé par K-LiBR3

pourquoi non ?

Parce que JavaScript intervient sur le comportement d'un document HTML. La fonctionnalité CTRL+S est gérée par le navigateur, donc hors de portée de JavaScript.
07/07/2011, 17h29
K-LiBR3

ok merci à vous, c'est bien dommage... x)
07/07/2011, 17h31
beekeep

:salut:

si c'est possible, il n'y a qu'à voir GMail ou Google documents.

par contre je sais pas comment ils font :aie:
07/07/2011, 17h33
Bovino

Euh... non, moi je trouve ça plutôt rassurant de savoir qu'un script écrit par quelqu'un que je ne connait pas et qui s'exécute depuis un site Web ne puisse pas être maître des applications qui tournent sur mon ordi... :?
07/07/2011, 18h08
beekeep

ça ne veut pas dire qu'il est maître de ton navigateur,
cela n'affecte pas le comportement de la sauvegarde (toujours accessible par le menu) ça squeeze juste le raccourcis clavier.

d'ailleurs une petite recherche donne quelques solutions à tester.

a+ ;)
07/07/2011, 19h06
K-LiBR3

Si quelqu'un sait comment ils font, qu'il s'exprime ^^
Google a peu être des permissions particulière dans firefox aussi nan ?
07/07/2011, 20h21
Bovino
Effectivement, il est possible d'empêcher la propagation de l'événement du document au navigateur.
Une solution assez simple :
Code:

1 2 3 4 5 6 document.onkeydown = function(e){ if(e.ctrlKey && e.keyCode==83){ // Ta fonction return false; } }
A adapter pour les versions de IE < 9...
07/07/2011, 21h52
K-LiBR3
Citation:
Envoyé par Bovino

Effectivement, il est possible d'empêcher la propagation de l'événement du document au navigateur.
Une solution assez simple :

Code:

1 2 3 4 5 6 document.onkeydown = function(e){ if(e.ctrlKey && e.keyCode==83){ // Ta fonction return false; } }

A adapter pour les versions de IE < 9...
Merci beaucoup, sa fonctionne, le seul problème, c'est que sa ouvre également la fenêtre firefox qui demande d'enregistré la page :S ?!
07/07/2011, 22h08
Bovino

Tu n'as qu'à tester : dmouronval.developpez.com/keycode/
07/07/2011, 22h28
K-LiBR3

Ouep mais comment pourrai on faire pour que sa n'ouvre pas de fenetre lors du ctrl + s ? Dans google document ils y arrivent !

et de cette facon

Code:

1
2
3
4
5
document.onkeydown = function(e){
	if(e.ctrlKey && e.keyCode==83){
	(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : e.preventDefault();
		// Ta fonction
	}

Citation:

Envoyé par mekal

et de cette facon

Code:

1
2
3
4
5
document.onkeydown = function(e){
	if(e.ctrlKey && e.keyCode==83){
	(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : e.preventDefault();
		// Ta fonction
	}

Sa m'ouvre toujours la fenetre firefox pour enregistrer la page :S
Vous pouvez tester le ctrl + s ici : http://stratskidrow2on2esl.free.fr/testCtrlS/

le code de la page :

Code:

1
2
3
4
5
6
7
8
9
10
<script>
						document.onkeydown = function(e)
						{
							if(e.ctrlKey && e.keyCode==83)
							{
								(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : e.preventDefault();
								alert('');
							}
						}
</script>

Bonsoir,
de façon plus générique
Code:

1 2 3 4 5 6 7 8 9 10 11 function CancelEvent(e){ if( e){ e.stopPropagation(); e.preventDefault(); } if( window.event){ window.event.cancelBubble = true; window.event.returnValue = false; return; } }
la prise en compte dépend également de la "façon" dont les touches sount appuyées, les 2 en même temps on ne passe pas l'une après l'autre cela ouvre la fenêtre de sauvegarde.

Conclusion : il faut gérer le tampon des touches...

Citation:
Envoyé par NoSmoking
Bonsoir,
de façon plus générique
Code:

1 2 3 4 5 6 7 8 9 10 11 function CancelEvent(e){ if( e){ e.stopPropagation(); e.preventDefault(); } if( window.event){ window.event.cancelBubble = true; window.event.returnValue = false; return; } }
la prise en compte dépend également de la "façon" dont les touches sount appuyées, les 2 en même temps on ne passe pas l'une après l'autre cela ouvre la fenêtre de sauvegarde.

Conclusion : il faut gérer le tampon des touches...
Je ne comprend pas votre code, que dois je faire exactement ?

Dois je faire ceci ? :

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
<script>
	document.onkeydown = function(e)
	{
		if(e.ctrlKey && e.keyCode==83)
		{
			(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : e.preventDefault();
			CancelEvent(e);
			alert('');
		}
	}
	function CancelEvent(e)
	{
		if(e)
		{
			e.stopPropagation();
			e.preventDefault();
		}
		if(window.event)
		{
			window.event.cancelBubble = true;
			window.event.returnValue  = false;
			return;
		}
	}
</script>

08/07/2011, 07h58
Bovino

Citation:

Envoyé par K-LiBR3

Sa m'ouvre toujours la fenetre firefox pour enregistrer la page :S

Le code que je t'ai donné fonctionne parfaitement :roll:
Bien entendu, il faut que la page ai le focus...

Effectivement, ceici marche tres bien quand on a le focus :

Code:

1
2
3
4
5
6
7
8
document.onkeydown = function(e)
						{
							if(e.ctrlKey && e.keyCode==83)
							{
								(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : e.preventDefault();
								$('newThird').innerHTML = 'Envoie du formulaire';
							}
						}

11/07/2011, 14h43
K-LiBR3

est ce que quelqu'un serai comment déclencher l'appuie sur un bouton summit en javascript ?

Car après mon ctrl + s, je voudrais que sa envoie un formulaire ^^ !
11/07/2011, 14h44
SpaceFrog

Code:

document.forms[0].submit()
11/07/2011, 16h57
K-LiBR3

Citation:

Envoyé par SpaceFrog

Code:

document.forms[0].submit()

C'est tellement évidant x) merci beaucoup
13/07/2011, 17h56
K-LiBR3
Rebonjour tout le monde,

le code que vous m'avez donné marche très bien, mais malheureusement ne marche qu'une seul fois :
Code:

1 2 3 4 5 document.onkeydown = function(e){ if(e.ctrlKey && e.keyCode==83){ (navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : e.preventDefault(); // Ta fonction }
Comment pourrais je faire pour qu'il marche autant de fois que je veux ?
15/07/2011, 01h49
K-LiBR3

Personne n'a de solution ? je ne comprend pas pourquoi sa ne marche qu'une seul fois oO
15/07/2011, 02h01
nadox

Bonsoir, quel est le code utilisé exactement ? Si tu envoie un formulaire, la page est rechargée...
15/07/2011, 14h00
Watilin

Dites les gars, je dois être complètement à l'ouest parce qu'aucune des solutions données ne marche chez moi. Je peux ajouter un comportement sur Ctrl + S, mais pas remplacer le comportement par défaut… De plus, sous Gmail et Google Docs, j'ai la même fenêtre qu'ailleurs, donc je ne vois pas de quoi vous parlez.
Mon navigateur est Firefox 3.6, et j'ai vérifié 15 fois…
15/07/2011, 14h31
K-LiBR3

En fait, tu écris des truc dans un textarea --> donc tu a le focus sur la page
Après tu fais ton ctrl + s et le code fonctionne

A l’intérieur tu met se que tu veux, j'ai mis un envoie de formulaire --> OK, sa recharge la page

Mais pour ma deuxième utilisation, la fonction du ctrl + s apuie sur un boutons qui envoie un ajax.request (sa ne recharge pas la page), lors du 2eme ctrl + s, sa ne marche plus !!! En fait c'est un bloc note que j'ai creer, vous pouvez test ici : http://hayj.free.fr
15/07/2011, 14h36
K-LiBR3

Peu être qu'il faut supprimé le onkeydown et le recréer ?

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
 
<!-----------BLOC NOTE------------->
<form style="position: absolute; width: 339px; right: 0;" id="formulaireCSS3">
	<label style="font-size: 15px; top: -7px; left: 130px;" for="textarea">Bloc-note :</label>
	<textarea id="textarea" name="textarea" cols="40" rows="40"></textarea>
	<div id="chargement"><input id="saveBloc" style="position: relative; top : -5px; left: 138px; margin: 3px;" type="submit" value="save" onclick="editBlocnote();"/></div>
</form>
<script>
	//On l'edit :
	function editBlocnote()
	{
		$('chargement').innerHTML = '<img style="position: relative; top : -5px; left: 154px; margin-bottom: 1px;" src="images/chargement.gif"/>';
		var params = 'text=' + $('textarea').value;
		new Ajax.Request
		(
			"editBlocnote.php",
			{
				method: 'post',
				parameters: params,
				onComplete: function(transport)
				{
					setTimeout("updateButton()", 500);
				}
			}
		);
	}
 
	function updateButton()
	{
		$('chargement').innerHTML = '<input style="position: relative; top : -5px; left: 138px; margin: 3px;" type="button"value="save" id="createNew" onclick="editBlocnote();"/>';
	}
 
	createOnkeydown();
	function createOnkeydown()
	{
		document.onkeydown = function(e)
		{
			if(e.ctrlKey && e.keyCode==83 && $('saveBloc') != null)
			{
				(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : e.preventDefault();
				$('saveBloc').click();
			}
		}
	}
</script>
<!-----------------------------------></div>

Tu utilise un input type subit que tu enlevé lorsque tu poste via Ajax, puis tu en recréé un autre de type button lorsque l'ajax revient... Mais surtout : ton input de type button n'as plus d'id ?!
De plus, il n'est pas très conseillé d'utiliser la méthode click...

Tu devrais n'utiliser qu'un input de type button, ne pas le supprimer mais plutôt le masquer, et sur le ctrl + s, pourquoi ne pas appeler simplement la fonction editBlocnote ?

16/07/2011, 00h46
K-LiBR3

Wahouuu je me rend compte de toutes mes erreur :aie:
Tu a raison, c'est pas le ctrl+ s qui ne marche pas, c'est juste que je remet pas le même id ! 8O
De plus j'ai pas besoin de faire mon .click(), il faut juste rappelé la fonction :lol::lol::lol:

Par contre je ne peux pas caché mon input parce que je le remplace par une image et apres je le remet !!!

Merci beaucoup de m'avoir aider (je pensais vraiment que c'était le ctrl + s qui ne marchait qu'une fois...), je met tout de suite le topic en résolu :ccool:
16/07/2011, 01h19
nadox

Si si tu peux masquer l'input plutôt que le supprimer et afficher l'image avant la requête Ajax. Puis, lors du retour de l'ajax, tu masque l'image et tu réaffiche l'input... C'est un simple jeu de style css avec la propriété display !
16/07/2011, 12h18
K-LiBR3

Citation:

Envoyé par nadox

Si si tu peux masquer l'input plutôt que le supprimer et afficher l'image avant la requête Ajax. Puis, lors du retour de l'ajax, tu masque l'image et tu réaffiche l'input... C'est un simple jeu de style css avec la propriété display !

Ouep ok jvais faire ça rien que pour te faire plaisir <3

Voilà c'est fait ^^

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!-----------BLOC NOTE------------->
<form style="position: absolute; width: 339px; right: 0;" id="formulaireCSS3">
	<label style="font-size: 15px; top: -7px; left: 130px;" for="textarea">Bloc-note :</label>
	<textarea id="textarea" name="textarea" cols="40" rows="40"><?php
                        if(!($fp = fopen("private/blocnote.txt","r")))
                        {
                                echo "Echec de l'ouverture du fichier";
                                exit;
                        }
                        while(!feof($fp))
                        {
                                // On récupère une ligne
                                $ligne = fgets($fp,255);
                                // On affiche la ligne
                                echo $ligne;
                        }
                        fclose($fp); // On ferme le fichier
                ?></textarea>
	<div id="chargement">
		<input style="position: relative; top : -5px; left: 138px; margin: 3px;" type="button" value="save" id="createNew" onclick="editBlocnote();"/>
		<img id="imgChargement" style="position: relative; top : -5px; left: 154px; margin-bottom: 1px; display: none;" src="images/chargement.gif"/>
	</div>
 
</form>
<script>
	//On l'edit :
	function editBlocnote()
	{
		//$('chargement').innerHTML = '<img style="position: relative; top : -5px; left: 154px; margin-bottom: 1px;" src="images/chargement.gif"/>';
		$('createNew').style.display = "none";
		//$$('#chargement > img').style.display = "block"; //ne fonctionne pas oO
		$('imgChargement').style.display = "block";
		var params = 'text=' + $('textarea').value;
		new Ajax.Request
		(
			"request/editBlocnote.php",
			{
				method: 'post',
				parameters: params,
				onComplete: function(transport)
				{
					setTimeout("updateButton()", 500);
				}
			}
		);
	}
 
	function updateButton()
	{
		//$('chargement').innerHTML = '<input style="position: relative; top : -5px; left: 138px; margin: 3px;" type="button" value="save" id="createNew" onclick="editBlocnote();"/>';
		$('imgChargement').style.display = "none";
		$('createNew').style.display = "block";
	}
 
	createOnkeydown();
	function createOnkeydown()
	{
		document.onkeydown = function(e)
		{
			if(e.ctrlKey && e.keyCode==83 && $('createNew') != null)
			{
				(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : e.preventDefault();
				editBlocnote();
			}
		}
	}
</script>
<!----------------------------------->