[Ancien]La FAQ Javascript

Version imprimable

Voir 40 message(s) de cette discussion en une page

Comment passer simplement des arguments à une fenêtre popup (ou autre)

Code:

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:

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

Page fille :

Code:

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

27/07/2006, 16h13
FremyCompany

Ouvrir un popup de style Modal Dialog sans utiliser showModalDialog

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

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

Code:

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)
};

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:

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 
Et dans vos scripts, appeller à la place de monElement.submit() la fonction extendendSubmit(monElement).
Code:

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

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:

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:

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)

Citation:
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:

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:

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).

14/08/2006, 18h10
FremyCompany

Citation:

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 ;)

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:

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>

13/09/2006, 14h00
SpaceFrog

faire une copie indépendante d'un array

Problématique:

soit un premier Array: Array1

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

Code:

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:

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 ...

Citation:

Envoyé par SpaceFrog

Problématique:

soit un premier Array: Array1

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

Code:

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:

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:

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]

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

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

17/09/2006, 15h10
FremyCompany
Citation:
Envoyé par Linaa

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

Code:

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....
17/09/2006, 15h47
Linaa

Citation:

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 :roll:

Code:

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";

Citation:
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:

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:

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;"/>

18/09/2006, 09h48
SpaceFrog

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 ...
18/09/2006, 09h59
Bisûnûrs

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.

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:

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:

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>

18/09/2006, 14h56
SpaceFrog

BSNJ tu as du tester avec des champs vides ...
fais le même test avec des champs préremplis ...
18/09/2006, 15h02
Bisûnûrs

Citation:

Envoyé par SpaceFrog

BSNJ tu as du tester avec des champs vides ...
fais le même test avec des champs préremplis ...

Suffit de rajouter :

Code:

<body onload="calculeLongueur();">

Voir 40 message(s) de cette discussion en une page