Problèmes de performance/accessibilité dans ce code jQuery/HTML?

Le code suivant fonctionne très bien dans IE, FF, Chrome et Safari, mais je me demande à quel point il est efficace lorsqu'il est mis à l'échelle pour beaucoup d'utilisateurs et s'il est accessible aux lecteurs d'écran/utilisateurs spéciaux/etc. Plus précisément, existe-t-il un meilleur moyen d'écrire le jQuery pour qu'il utilise moins de $ (this) références, et est-ce que cela cause même des problèmes de performance? De même, le fait de ne pas afficher les étiquettes sur les étiquettes limite-t-il l'accessibilité aux personnes utilisant des lecteurs d'écran? J'ajoute dans l'attribut title quand la page est chargée dans ce but, mais cela aide-t-il/est-ce une bonne idée? Aussi, je suis conscient que si javascript est désactivé tout cela serait inutile, mais je me demandais juste ici.Problèmes de performance/accessibilité dans ce code jQuery/HTML?

<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      fieldset { 
       border: none; 
       padding: 10px; 
       width: 600px; 
       margin-top: 5px; 
      } 

      label { 
       display: none; 
      } 

      input { 
       width: 150px; 
       margin: 5px; 
       float: left; 
       display: block; 
      } 

      br { 
       clear: both; 
      } 
     </style> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       GetInputLabels(); 
       $("input").focus(function() { 
        if ($(this).val() == $(this).prev("label").text()) { 
         $(this).val('').css("color", "#000"); 
        }     
       }); 
       $("input").blur(function() { 
        if ($(this).val() == '') { 
         $(this).val($(this).prev("label").text()).css("color", "#bbb"); 
        } 
       }); 
       function GetInputLabels() { 
        $("input").each(function() { 
         var label = $(this).prev("label").text(); 
         $(this).val(label).css("color", "#bbb").attr("title", label); 
        }); 
       } 
      }); 
     </script> 
    </head> 
    <body> 
     <form> 
      <fieldset> 
       <label for="fname">First Name</label> 
       <input id="fname" type="text" /> <br/> 

       <label for="lname">Last Name</label> 
       <input id="lname" type="text" /> <br/> 

       <label for="email">Email</label> 
       <input id="email" type="text" /> <br/> 
      </fieldset> 
     </form> 
    </body> 
</html>

Source

2009-12-16 ryanulit

Votre code semble correct, mais vous pouvez mettre en cache les éléments jQuery DOM afin de ne pas avoir à traverser la structure DOM plus que nécessaire. Vous pouvez également les événements de la chaîne pour faire moins de recherches:

var input = $('input'); 
input.focus(fn).blur(fn)...

vous pouvez également mettre en cache ce pour éviter supplémentaire appelle jQuery:

var context = $(this);

Vous ne devriez pas masquer à l'aide display:none si vous souhaitez accéder à des lecteurs d'écran . Je recommande d'utiliser quelque chose de lke position:absolute; left:-10000px; à la place.

est ici une version optimisée de votre script:

jQuery(function($) { 

    var input = $('input'); 
    var GetInputLabels = function() { 
     input.each(function() { 
      var elem = $(this); 
      var label = elem.prev('label').text(); 
      elem.val(label).css("color", "#bbb").attr("title", label); 
     }); 
    } 

    GetInputLabels(); 

    input.focus(function() { 
     var elem = $(this); 
     if (elem == elem.prev('label').text()) { 
      elem.val('').css("color", "#000"); 
     }          
    }).blur(function() { 
     var elem = $(this); 
     if (elem.val() == '') { 
      elem.val(elem.prev("label").text()).css("color", "#bbb"); 
     } 
    }); 
});

Source

2009-12-16 16:37:03 David

Ces réponses fonctionnent pour moi. Merci a tous. – ryanulit

Une chose simple serait de définir var element = $(this); au début de vos fonctions anonymes et d'utiliser cette variable. Cela évitera de faire la recherche plusieurs fois.

Comme pour les lecteurs d'écran, réglage des étiquettes à visibilty: hidden (ou display: none) va les empêcher d'être lus à haute voix. La bonne approche semble les mettre hors écran pour les utilisateurs normaux avec une solution position:absolute. Le lien suivant fournit plus d'informations à ce sujet: http://www.webaim.org/techniques/css/invisiblecontent/

Source

2009-12-16 16:35:22 Wookai

Une chose importante que vous devez retenir est de mettre en cache vos requêtes DOM. Vous pouvez également chaîner votre code.

var inputs = null; 
function getInputs() { 
    if (inputs == null) { 
     inputs = $("input"); 
    } 

    return inputs; 
} 


$(document).ready(function() { 
    getInputs().each(function() { 
     var elm = $(this); 
     var label = elm.prev("label").text(); 
     elm.val(label).css("color", "#bbb").attr("title", label); 
    }).focus(function() { 
     var elm = $(this); 
     if (elm .val() == elm .prev("label").text()) { 
      elm .val('').css("color", "#000"); 
     }          
    }).blur(function() { 
     var elm = $(this); 
     if (elm.val() == '') { 
      elm.val(elm.prev("label").text()).css("color", "#bbb"); 
     } 
    }); 
});

Source

2009-12-16 16:37:26 ChaosPandion

Une faute de frappe là-dedans. $ ("inputs") devrait être $ ("input"), mais après avoir corrigé cela, ça marche. Je n'ai même pas pensé à enchaîner les événements; bonne idée. – ryanulit

Problèmes de performance/accessibilité dans ce code jQuery/HTML?

Répondre

Questions connexes