[Ancien]La FAQ Javascript

**Commodore** · 25/07/2006, 11h49

On ne peut pas faire un scroll horizontal dans une Selectbox en html. Cependant, il existe un moyen d'émuler ce type de Selectbox :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
<head>
  <title>Horizontal scroll bar dans un select box</title>
  <script language="javascript">
   //Scrolling sur DIV
   function OnDivScroll()
   {
    var liste = document.getElementById("liste");
    //horizontal scrolling: Pour éviter un scroll vertical quand la taille de la selectbox est 8 et le compte des items est plus grand
    //vertical scrolling: Pour voir tous les items de la selectbox
 
    //Vérifie si les items sont plus que 8, et mettre la taille de la select en conséquence
    if (liste.options.length > 8)
    {
     liste.size=liste.options.length;
    }
    else
    {
     liste.size=8;
    }
   }
 
   function OnSelectFocus()
   {
    if (document.getElementById("divListe").scrollLeft != 0)
    {
     document.getElementById("divListe").scrollLeft = 0;
    }
 
    var liste = document.getElementById('liste');
    if( liste.options.length > 8)
    {
      liste.focus();
      liste.size=8;
    }
   }   
  </script>
</head>
<body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">
   <table cellpadding="0" cellspacing="0" border="0" align=center>
    <tr>
     <td>
      <asp:Label Runat=server ID="Label2"> Liste :</asp:Label>
     </td>
    </tr>
    <tr>
     <td>
      <br>
      <SELECT size="9" multiple style="WIDTH: 300px">
       <OPTION>Item 1</OPTION>
       <OPTION>Item 2</OPTION>
       <OPTION>Item 3</OPTION>
       <OPTION>Item 4</OPTION>
       <OPTION>Item 5</OPTION>
       <OPTION>Item 6</OPTION>
       <OPTION>Item 7</OPTION>
       <OPTION>Item 8</OPTION>
       <OPTION>Item 9</OPTION>
       <OPTION>Item 10</OPTION>
      </SELECT>
     </td>
    </tr>
    <tr>
     <td>
      <br>
      <hr>
      <br>
      <asp:Label Runat=server ID="Label1"> Liste :</asp:Label>
     </td>
    </tr>
    <tr>
     <td>
     <br>
      <div id="divListe" style="OVERFLOW: auto;WIDTH: 304px;HEIGHT: 147px"
       onscroll="OnDivScroll();">
       <SELECT id="liste" size="8" multiple onfocus="OnSelectFocus();">
        <OPTION>Item 1</OPTION>
        <OPTION>Item 2</OPTION>
        <OPTION>Item 3</OPTION>
        <OPTION>Item 4</OPTION>
        <OPTION>Item 5</OPTION>
        <OPTION>Item 6</OPTION>
        <OPTION>Item 7</OPTION>
        <OPTION>Item 8</OPTION>
        <OPTION>Item 9</OPTION>
        <OPTION>Item 10</OPTION>
       </SELECT>
      </div>
     </td>
    </tr>
   </table>
  </form>
</body>
</html>

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

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, 13h35

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, 19h12

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, 10h51

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, 18h00

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, 18h10

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, 14h22

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>

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

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, 09h48

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, 09h59

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, 14h47

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>

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

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, 17h12

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, 14h39

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, 15h10

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, 15h47

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** · 30/10/2006, 11h51

Pour la question suivante : Comment débugger un script javascript ?
Je propose l'ajout du paragraphe suivant.

Si vous souhaiter allez plus loin et poser des points d'arrêts, modifier le code ou les valeurs de variables durant l'exécution, obtenir les contextes ou les piles d'appels, vous devez utiliser les programme (gratuits) suivants :

Pour Internet Explorer :
Microsoft Visual Web Developper Express Edition 2005 et activer l'option de débogage externet ET interne dans les options internet d'IE

Pour FireFox :
Installer le add-In FireBug (en Anglais)

Pour les autres (tous navigateurs confondus, mais à poser dans le script lui-même : )

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
/* Methode 1 : Analyser un objet en profondeur... Parfois lent ... Peu pratique mais parfois très utile */
function debug(obj, name, prof) {
    var msg = name + obj;
 prof = (prof == null) ? true : prof;
 if (prof && (typeof (obj) == "array" || typeof (obj) == "object")){
    try {
        for (key in obj)
        {
            msg = msg + debug(obj[key], name + "[" + key + "]", false);
        }
    } catch (ex) {}}
    return msg;
}
 
/* Méthode 2 : Evaluation de scripts. Très maniable et très pratique */
// Penser à "0; var xyz = obj.xyz(); x.init()" pour exécuter une fonction et 
// en conserver la valeur en mémoire puis y ajouter autant de chose que voulu...
if (confirm("Lancer le débogage ?")) {
 var _V_DEBUG = null;
 var evalstr = "'Débogage Activé !'";
 while ((evalstr != "|END|") && (evalstr == "" ? (!confirm("Terminer le débogage ?")) : true)) 
 {
  try
  {
   eval("_V_DEBUG=" + evalstr);
  }
  catch (ex)
  {
   _V_DEBUG = "Impossible d'évaluer l'expression (" + evalstr + ") : " + ex.description;
  }
  var pnum = 0;
  try {for (key in _V_DEBUG) {pnum++}} catch(ex) {pnum = "Erreur : " + ex.description + " : -1"}
  alert("EVAL : " + _V_DEBUG + "\n\n" + pnum + " sous objet(s)")
  evalstr = prompt("Valeur à analyser : (|END| pour stopper)",evalstr)
 }
}

**FremyCompany** · 06/11/2006, 20h37

Un code qui a déjà servi pas mal de fois :
Envoyer un formulaire grâce à AJAX :

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
function getDataFromForm(Form) {
    var data="";
    var key=0;
    for (key=0;key<Form.elements.length;key++) {      
         var currentValue=(Form.elements[key].tagName.toLowerCase()=="select")?getSelectValue(Form.elements[key]):Form.elements[key].value
         data+=escape(Form.elements[key].name)+"="+escape()+"&";
    }
    return data.substr(0, data.length-1);
}
 
function getSelectValue(select) {
   var value="";
   for (var i=0; true; i++) {
      if (select.option[i]) {
         if (select.options[i].selected) {
            value += select.options[i].value + "||";
         }
      } else {return value.substr(0, value.length-2); }
   }
}

Ne marche pas pour les input de type FILE.

Dans le cas des selects multiples (lorsqu'on peut sélectionnez plusieurs valeurs), il faut splitter la chaine renvoyée au moyen de "||" pour obtenir le tableau des valeurs selectionnées

[Ancien]La FAQ Javascript

Contribuez

Vue hybride

Partager

Partager