[Ancien]La FAQ Javascript

**FremyCompany** · 26/07/2006, 12h28

Code :

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

1
2
3
4
5
6
createWindow=function(url, params, args) {
    var win = window.open(url,"_blank",params);
    for (key in args) {
        win[key]=args[key];
    }
}

Utilisation :
Page mère :

Code :

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

1
2
3
4
5
createWindow("page.html",null, {
    "parentDocument":document,
    "parentWindow":window,
    "dataInput":document.getElementsById("data")
}

Page fille :

Code :

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

window.parentDocument.body.appendChild(window.parentDocument.createTextNode("   ... Ca a marché !"))

**FremyCompany** · 27/07/2006, 17h13

Ouvrir un popup de style Modal Dialog sans utiliser showModalDialog, en passant des arguments, adaptable

Petite solution simple et sans prétention, réponse asychrone

**FremyCompany** · 04/08/2006, 14h35

Position de la souris (suite à une demande sur un forum)

Code :

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

1
2
3
4
5
6
7
8
9
10
var Mouse={"x":0,"y":0};
 
document.onmousemove = function (e)
{
   Mouse.x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
   Mouse.y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
   if (Mouse.x < 0) {Mouse.x=0;}
   if (Mouse.y < 0) {Mouse.y=0;}
   // document.OnMouseMove.Raise(this, e?e:event)
};

**Sergejack** · 12/08/2006, 20h12

Q) Pourquoi mon formulaire n'excécute pas le onsubmit lorsque je fais un submit() par javascript ? (+solution)

R) Parce que que le submit() soumet directement le formulaire sans génèrer l'évenement submit.
Ainsi, si l'on désire pouvoir en javascript faire un submit d'un formulaire tout en déclenchant l'évenement, il faudra proccéder comme suit :

Monscript.js

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
 
 
// JavaScript Document
<!--
 
// Moz, Firefox, ...
if (!document.all) {
	submitEvent = document.createEvent( "HTMLEvents" ); 
	submitEvent.initEvent("submit", true, true);
}
 
// soumlet un formulaire après avoir lancer l'évenement lié
// param : formObj = objet formulaire
function extendendSubmit(formObj) {
	// IE
	if (document.all) {
		formObj.fireEvent( "onSubmit" );
		formObj.submit();
		return;
	}
 
	// Moz, Firefox, ...
	formObj.dispatchEvent(submitEvent);
}
-->

Et dans vos scripts, appeller à la place de monElement.submit() la fonction extendendSubmit(monElement).

Code :

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

1
2
3
 
 
extendendSubmit(document.getElementById("monFormulaire01"));

**FremyCompany** · 13/08/2006, 11h51

Je préfère pour ma part proposer une solution plus simple, plus efficace et mieux adaptée de la version du script précédent

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
submitForm=function(form, useValidate) {
    var ok=true; useValidate=((useValidate==null)?true:useValidate);
    if (useValidate) {
        if (form.onsubmit) {
            try {
                var tmp=form.onsubmit();
                if (typeof(tmp)=="boolean") {
                     ok=tmp;
                }
             } catch (ex) {}
        }
    } if (ok) {
        form.submit();
        return true;
    }
    return false;
}

Utilisation :

Code :

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

1
2
3
4
5
// Avec exécution du onsumbit :
submitForm(document.forms["NAME"])
submitForm(document.forms["NAME"],true)
// Sans exécution du onsubmit
submitForm(document.forms["NAME"],false)

**Sergejack** · 13/08/2006, 19h00

Envoyé par FremyCompany

Je préfère pour ma part proposer une solution plus simple, plus efficace et mieux adaptée de la version du script précédent

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
submitForm=function(form, useValidate) {
    var ok=true; useValidate=((useValidate==null)?true:useValidate);
    if (useValidate) {
        if (form.onsubmit) {
            try {
                var tmp=form.onsubmit();
                if (typeof(tmp)=="boolean") {
                     ok=tmp;
                }
             } catch (ex) {}
        }
    } if (ok) {
        form.submit();
        return true;
    }
    return false;
}

Utilisation :

Code :

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

1
2
3
4
5
// Avec exécution du onsumbit :
submitForm(document.forms["NAME"])
submitForm(document.forms["NAME"],true)
// Sans exécution du onsubmit
submitForm(document.forms["NAME"],false)

Pour faire un submit sans déclencher l'évenement, il suffit de faire submit() tout simplement (cf. mon post).
Par ailleurs si tu dis que ta solution est plus simple, plus efficace, plus adaptée et plus riche en oligo-éléments, c'est alors forcément vrai et on ne peut que s'incliner (à condition de ne surtout pas vérifier la chose).

**FremyCompany** · 14/08/2006, 19h10

Envoyé par Sergejack

Pour faire un submit sans déclencher l'évenement, il suffit de faire submit() tout simplement (cf. mon post).
Par ailleurs si tu dis que ta solution est plus simple, plus efficace, plus adaptée et plus riche en oligo-éléments, c'est alors forcément vrai et on ne peut que s'incliner (à condition de ne surtout pas vérifier la chose).

Je n'ai fait que peu de choses, l'idée vient de toi

J'ai changé les éléments suivants :
tu lancais le onsubmit, mais si il contient une erreur, le submit n'est pas exécuté, alors que dans des conditions normales, il l'est ! De plus, si le onsubmit renvoie false, le formulaire était tout de même envoyé... ennuyeux

J'ai donc utiliser un bloc try pour résoudre le premier problème et un if+ok+tmp pour l'autre

**SpaceFrog** · 08/09/2006, 15h22

Bon alors je fais suite à une remarque qui m'a été faite concernant le code qui se trouve déja dans la faq concernant l'autotabulation dasn les champs de forumlaires...
Le but est de passer au champs suivant lorsque la longueur maximale est atteinte, ce qui facilite la saisie...
Le problème est que partais du principe que les champs étaient vides au départ... hors il est vrai que ce n'est pas toujours le cas...
voici donc une solution qui répare cet oubli ...
Seul désavantage mais je n'ai pas réussi à le contourner : le champs se vide sur le focus mais si l'on ne tape rien retrouve sa valeur initiale...

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
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>AutoTab Page</title> 
<script language="JavaScript" type="text/JavaScript"> 
var run=0
var temp=""
function TouchUp(evt,obj,go){
			if(evt.keyCode==9 || evt.keyCode==16){return false;}
			temp=obj.value;obj.title=temp;Autotab(go, obj.size, obj.value);
			}
 
function Autotab(box, longueur, texte) {
run=1;
    if (texte.length > longueur-1) { 
        document.getElementById(box).focus(); 
    } 
    run=0;
     }
 
</script> 
</head> 
<body > 
<input type="text" size="2" maxLength="2" id="TB1" 	onkeyup="TouchUp(event,this,'TB2')" onfocus="temp=this.value; this.value='';this.title=temp;" onblur="this.value=temp;temp='';this.title=temp;"  /> 
 
<input type="text" size="2" maxLength="2"  id="TB2"  onkeyup="TouchUp(event,this,'TB3')" onfocus="temp=this.value; this.value='';this.title=temp;" onblur="this.value=temp;temp='';this.title=temp;"/> 
 
<input type="text" size="4" maxLength="4"  id="TB3" id='test' title="coucou" /> 
<br/>
 
</body> 
</html>

**SpaceFrog** · 13/09/2006, 15h00

Problématique:

soit un premier Array: Array1

si vous tentez de faire une copie de cet Array comme ceci:

Code :

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

var Array2=Array1

Toute modification postérieure sur la Array2 entrainera la modofcation identique du Array1 ils pointent tous les deux vers le même objet !

Comment faire une copie indépendante de l'array ?

Code :

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

Array2=Array1.slice(0)

c'est aussi simple que ça ...

mais pour des arrays à plusieurs dimensions il faudra boucler...

NB: un join('|').split('|') retourne le memê résultat ...

**FremyCompany** · 13/09/2006, 18h12

Envoyé par SpaceFrog

Problématique:

soit un premier Array: Array1

si vous tentez de faire une copie de cet Array comme ceci:

Code :

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

var Array2=Array1

Toute modification postérieure sur la Array2 entrainera la modofcation identique du Array1 ils pointent tous les deux vers le même objet !

Comment faire une copie indépendante de l'array ?

Code :

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

Array2=Array1.slice(0)

c'est aussi simple que ça ...

mais pour des arrays à plusieurs dimensions il faudra boucler...

NB: un join('|').split('|') retourne le memê résultat ...

Pareil, mais pour n'importe quel type d'objet par référence (classe définie par l'utilisateur, Object, ... mais pas String, Number, ...) excepté peut-être les Array (je n'ai pas testé) ou par valeur (les autres, ou aucune copie manuelle ne doit être apportée)

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
CopyObject=function(o,deep) {
   if (deep==null || typeof(deep)=="undefined") { deep=true; }
   if (typeof(o)=="object") {
       var o2=new Object();
       for (property in o) {
            o2[property]=(deep?CopyObject(o[property]):o[property]);
       }
       return o2;
   }
   return o;
}

/*
    Utilisation :
    var Shape1; var Shape2;
    Shape1.x=3; Shape1.y=2; Shape1.width=1; Shape1.height=4;
    Shape2 = CopyObject(Shape1)
*/

[EDIT]Petites modifications[/EDIT]

**Linaa** · 17/09/2006, 15h39

Comment empêcher la sélection des éléments de la page ?

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
function deselect() {
	return false;
}
if (typeof document.onselectstart != 'undefined')
	document.onselectstart = deselect;
</script>

Note : Cela n'empêche pas l'utilisateur de voir la source de la page

**FremyCompany** · 17/09/2006, 16h10

Envoyé par Linaa

Comment empêcher la sélection des éléments de la page ?

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
function deselect() {
	return false;
}
if (typeof document.onselectstart != 'undefined')
	document.onselectstart = deselect;
</script>

Note : Cela n'empêche pas l'utilisateur de voir la source de la page

N'est compatible que IE-Only...

Une méthode pour les Gecko's Browser existe aussi....

**Linaa** · 17/09/2006, 16h47

Envoyé par FremyCompany

N'est compatible que IE-Only...

Une méthode pour les Gecko's Browser existe aussi....

Bah là je la connais pas, faudrait ptete la rajouter aussi

**FremyCompany** · 17/09/2006, 18h54

Code :

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

1
2
3
4
5
6
var returnFalse=function() { return false; };
var returnTrue=function() { return true; };
document.onselectstart=returnFalse;
document.onmousedown=returnFalse;
document.onclick=returnTrue;
document.unselectable="on";

**Bisûnûrs** · 18/09/2006, 10h28

Envoyé par SpaceFrog

Bon alors je fais suite à une remarque qui m'a été faite concernant le code qui se trouve déja dans la faq concernant l'autotabulation dasn les champs de forumlaires...
Le but est de passer au champs suivant lorsque la longueur maximale est atteinte, ce qui facilite la saisie...
Le problème est que partais du principe que les champs étaient vides au départ... hors il est vrai que ce n'est pas toujours le cas...
voici donc une solution qui répare cet oubli ...
Seul désavantage mais je n'ai pas réussi à le contourner : le champs se vide sur le focus mais si l'on ne tape rien retrouve sa valeur initiale...

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
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>AutoTab Page</title> 
<script language="JavaScript" type="text/JavaScript"> 
var run=0
var temp=""
function TouchUp(evt,obj,go){
			if(evt.keyCode==9 || evt.keyCode==16){return false;}
			temp=obj.value;obj.title=temp;Autotab(go, obj.size, obj.value);
			}
 
function Autotab(box, longueur, texte) {
run=1;
    if (texte.length > longueur-1) { 
        document.getElementById(box).focus(); 
    } 
    run=0;
     }
 
</script> 
</head> 
<body > 
<input type="text" size="2" maxLength="2" id="TB1" 	onkeyup="TouchUp(event,this,'TB2')" onfocus="temp=this.value; this.value='';this.title=temp;" onblur="this.value=temp;temp='';this.title=temp;"  /> 
 
<input type="text" size="2" maxLength="2"  id="TB2"  onkeyup="TouchUp(event,this,'TB3')" onfocus="temp=this.value; this.value='';this.title=temp;" onblur="this.value=temp;temp='';this.title=temp;"/> 
 
<input type="text" size="4" maxLength="4"  id="TB3" id='test' title="coucou" /> 
<br/>
 
</body> 
</html>

Il suffit d'enlever le code en rouge dans les lignes suivantes :

Code :

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

1
2
3
<input type="text" size="2" maxLength="2" id="TB1" 	onkeyup="TouchUp(event,this,'TB2')" onfocus="temp=this.value; this.value='';this.title=temp;" onblur="this.value=temp;temp='';this.title=temp;"  /> 

<input type="text" size="2" maxLength="2"  id="TB2"  onkeyup="TouchUp(event,this,'TB3')" onfocus="temp=this.value; this.value='';this.title=temp;" onblur="this.value=temp;temp='';this.title=temp;"/>

**SpaceFrog** · 18/09/2006, 10h48

ce n'est malheureusement pas aussi simple ...

la remise à vide du champs n'est pas là pour faire joli, elle a son utilité dasn l'ergonomie, en effet si le champs n'est pas vide voire même a la taille max lors du focus la tabulation se faire plus rapidement que voulue ...c'est la d'ailleurs toute la problématique et la raison de cette seconde version du code ...

**Bisûnûrs** · 18/09/2006, 10h59

J'ai pourtant testé avec Firefox et IE et il n'y a pas de problème. :/

Edit :

Dans ce cas-là faut le pratiquer sur le dernier champ aussi, ce qui n'est pas le cas actuellement.

**Bisûnûrs** · 18/09/2006, 15h47

Petit script pour [dé]compter le nombre de caractères restants sur une saisie dans un input ou un textarea, nombre définit par le script :

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
<script language="javascript" type="text/javascript">
function calculeLongueur(){
   var iLongueur, iLongueurRestante;
   iLongueur = document.getElementById('monchamp').value.length;
   if (iLongueur>30) {
      document.getElementById('monchamp').value = document.getElementById('monchamp').value.substring(0,30);
      iLongueurRestante = 0;
   }
   else {
      iLongueurRestante = 30 - iLongueur;
   }
   if (iLongueurRestante <= 1)
      document.getElementById('indic').innerHTML = iLongueurRestante + "&nbsp;caract&egrave;re&nbsp;disponible";
   else
      document.getElementById('indic').innerHTML = iLongueurRestante + "&nbsp;caract&egrave;res&nbsp;disponibles";
}
</script>

Code html :

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

1
2
3
4
5
<form action="adresse" method="post" name="monform">
   <div id="indic">30 caractères disponibles</div>
   <input onblur="calculeLongueur();" onfocus="calculeLongueur();" onkeydown="calculeLongueur();" onkeyup="calculeLongueur();" name="monchamp" id="monchamp" value="" />
   <input type="submit" value="Valider" />
</form>