Savoir quel input à le focus ! (document activeElement sous FireFox et co)

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 = allInputsIdea;
   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 = allTAreasIdea;
  16:              if (haveFocus(inp)) {
  17:                  this.activeElement = inp;
  18:                  return "text";
  19:              }
  20:          }
  21:      } catch (ex) {}

Et bien voila qui est fait !

Dire que l'on pensait cela impossible.

J'en profite pour dire que j'ai mis à jour DOCUMENT.SELECTION pour FireFox qui tient fonctionne désormais EXACTEMENT comme le vrai Wink

Bonne prog'

Fremy

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Publié 14 février 08 06:57 par FREMYCOMPANY

Commentaires

# FREMYCOMPANY said on février 14, 2008 22:15:

Arg, il semblerait qu'il y ait un bug dans ma méthode sous FF.

Je vais corriger ca ce week-end et je vous tiens au courrant

# FREMYCOMPANY said on février 15, 2008 19:51:

Correction faite !

Les commentaires anonymes sont désactivés

About FREMYCOMPANY

François REMY est un jeune développeur belge plein d'entrain qui traite surtout des technologies du web et de DotNet dans ses articles.


Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01




Search

Go

Ce blog

Abonnements