Dernière mise à jour : 15 fev. 2008 à 18:20

document.activeElement [IE]

Rien de plus simple sous IE. Document.activeElement !

Ah oui, mais cela ne marche pas sous FireFox et co....

Regardons du coté de codes-sources : activeElement avec Firefox snippets pour javascript

Ah oui, mais cela nécéssite un objet Event, ce qu'il n'est pas toujours possible d'avoir, et cela ne marche pas vraiment (vous pouvez tester, si vous prenez un event onmouseover sur un DIV, il vous dira que l'élément actif est le BUTTON, or on veut la textbox active, pas l'élément lié à l'event !

ITHMLInputElement.hasFocus [IE]

Reste alors une autre solution, parcourir tous les inputs et voir lequel est sélectionné.

Sous IE, on pourrait le faire : il existe une propriété hasFocus ! Mais encore une fois, sous FF.... nada !

Document.selection [IE] ou window.getSelection() [FF, Safari]

De nouveau, c'est IE Only.... enfin, pas si sûr ! Un équivalent FF existe : window.getSelection()

Il ne fonctionne pas du tout de la même manière mais on peut s'y habituer.

Seulement voila, quand c'est un input qui a le focus, celui-ci ne fait pas partie de la sélection

La sélection est vièrge MAIS positionnée juste avant l'input ! Reste donc à trouver comment déterminer si un input est l'élément final d'une sélection. Encore une fois, c'est pas simple....

... MAIS C'EST POSSIBLE !!! YOUPII !!! (voir plus loin)

Mais on n'a toujours pas Opéra...

Alors pour Opéra, j'ai trouvé une méthode un peu hasardeuse : On regarde si une sélection existe via selectionStart/End. Mais cela ne marche pas si la sélection est vide et commence au début de la textbox.... Faut de mieux....

Finalement

En fouillant un peu, j'ai créé la méthode suivante : [EDIT=15/02/08]

   1:      function haveFocus(inp) {

   2:          try { // IE

   3:              var result = !!(inp.hasFocus||inp==document.activeElement);

   4:              if (result) { return result; }

   5:          } catch (ex) {}

   6:          try { // FF; Safari

   7:              var sel = false;

   8:              sel=this.window.getSelection().getRangeAt(0);

   9:              if (!sel.collapsed) { return false; }

  10:              var sel2 = document.createRange();

  11:              sel2.setStartBefore(inp);

  12:              sel2.setEndBefore(inp);

  13:              var result = true; //sel.compareBoundaryPoints(Range.START_TO_START, sel2)==0;

  14:              //result = result && sel.compareBoundaryPoints(Range.END_TO_END, sel2)==0;

  15:              result = result && sel.startOffset == sel2.startOffset

  16:              result = result && sel.endOffset == sel2.endOffset

  17:              return result;

  18:          } catch (ex) {}

  19:          try { // Opéra

  20:              return !!(inp.selectionStart||inp.selectionEnd);

  21:          } catch (ex) {}

  22:          return false;

  23:      }

Et si on généralise pour trouver l'input qu'on cherche (extrait de ma source) :

   1:      try {

   2:          var allInputs = this.document.getElementsByTagName("INPUT");

   3:          var allTAreas = this.document.getElementsByTagName("TEXTAREA");

   4:          var l1 = allInputs.length; var l2 = allTAreas.length;

   5:          for (var i=0; i<l1; i++) {

   6:              var inp = allInputs;

   7:              if (inp.type=="" || inp.type=="text") {

   8:                  if (haveFocus(inp)) {

   9:                      this.activeElement = inp;

  10:                      return "text";

  11:                  }

  12:              }

  13:          }

  14:          for (var i=0; i<l2; i++) {

  15:              var inp = allTAreas;

  16:              if (haveFocus(inp)) {

  17:                  this.activeElement = inp;

  18:                  return "text";

  19:              }

  20:          }

  21:      } catch (ex) {}