Retour à Tutoriels Javascript

Tutoriel : Filigrane texte Boxes(HTML/Javascript/jQuery)

  • Poly
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Juil 31, 2004
  • Messages: 1054
  • Loc: Same place you left me.
  • Status: Offline

Message Août 3rd, 2011, 6:09 pm

Introduction :


Ce tutoriel va sur la façon d'une zone de texte de filigrane. Cela est très très pratique si vous voulez label ce qu'un texte parmi vise, mais ne souhaitez pas utiliser l'espace supplémentaire sur votre mise en page du pour faire avec le texte. Ceci aide également à garder votre conception plus propres à la recherche.

Ex:
Attachments:
1.jpg


Quelques Notes :


La première chose à noter est que la variable d'espace réservé HTML est une addition de HTML5. Il n'existait pas dans les versions précédentes. Cela signifie, qu'elle ne fonctionnera que dans les navigateurs plus récents qui prennent en charge HTML5, qui crée un peu d'un problème, étant donné le nombre d'utilisateurs n'ont pas un navigateur HTML5. Je vais vous montrer comment résoudre ce problème par la suite dans le didacticiel et rendre la même apparence que la variable d'espace réservé.

Étape 1 ( ;La zone de texte ) :


Créer votre boîte de texte que vous souhaitez ajouter le titulaire d'un lieu à. Dans cet exemple, nous construirons une case de recherche. Tout le monde doit être familier avec le code HTML de base nécessaire pour créer une zone de texte le plus :
Code: [ Select ]
<input type="text" name="search" />


Étape 2 ( ;Ajout de l'espace réservé ) :


Maintenant, nous avons besoin d'ajouter le code pour l'effet de l'espace réservé pour les navigateurs de HTML5 :
Code: [ Select ]
<input type="text" name="search" placeholder="Search here..." />

Comme vous pouvez le voir, nous avons ajouté une nouvelle variable à l'intérieur de la &lt;input&gt;. Toute valeur entrée à l'intérieur les guillemets doubles de l'espace réservé sera ce qui apparaît sur la page, quelle que soit la version du navigateur (HTML5 ou versions antérieures).

À ce moment seulement HTML5 navigateurs sera en mesure d'utiliser la variable d'espace réservé. Maintenant, nous avons besoin d'expliquer à tous les navigateurs moindre quoi faire lorsqu'ils rencontrent cette variable inexplicable.

Étape 3 ( ; inclure jQuery ) :


Vous devrez ajouter le code jQuery dans notre document. Ajoutez ce qui suit dans votre &lt;head&gt; :
Code: [ Select ]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


Étape 4 ( ;Vérifier le navigateur Support ) :


OK maintenant, nous avons la jQuery chargé, tellement permet de faire quelque chose avec elle. Furent ensuite aller vérifier si le navigateur en visitant la page prend en charge la variable d'espace réservé ou si étaient gonna have à elle fake. Tout ci-dessous devront être à l'intérieur d'une balise &lt;script&gt;. Il ne ferment pas à cette époque, nous le fera plus tard.
Code: [ Select ]
jQuery(function() {
  jQuery.support.placeholder = false;
  test = document.createElement('input');
  if('placeholder' in test) jQuery.support.placeholder = true;
});
  1. jQuery(function() {
  2.   jQuery.support.placeholder = false;
  3.   test = document.createElement('input');
  4.   if('placeholder' in test) jQuery.support.placeholder = true;
  5. });

Le code ci-dessus ajoute l'espace réservé à la liste des objets .support jQuery.

Étape 5 ( ;L'effet de l'espace réservé de feindre ) :


Se maintenant à la partie faking. Nous savons maintenant si le navigateur est second espace réservé. Si elle n'est pas le cas, le navigateur va exécuter ce code, partout où il amendes variable « espace réservé ». Ce code est encore à l'intérieur de la balise &lt;script&gt;. Nous prendra fin la balise &lt;script&gt; à la fin de notre code ci-dessous :
Code: [ Select ]
$(function() {
  if(!$.support.placeholder) {
   var active = document.activeElement;
   $(':text').focus(function () {
     if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
      $(this).val('').removeClass('hasPlaceholder');
     }
   }).blur(function () {
     if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
      $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
     }
   });
   $(':text').blur();
   $(active).focus();
   $('form:eq(0)').submit(function () {
     $(':text.hasPlaceholder').val('');
   });
  }
});
</script>
  1. $(function() {
  2.   if(!$.support.placeholder) {
  3.    var active = document.activeElement;
  4.    $(':text').focus(function () {
  5.      if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
  6.       $(this).val('').removeClass('hasPlaceholder');
  7.      }
  8.    }).blur(function () {
  9.      if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
  10.       $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
  11.      }
  12.    });
  13.    $(':text').blur();
  14.    $(active).focus();
  15.    $('form:eq(0)').submit(function () {
  16.      $(':text.hasPlaceholder').val('');
  17.    });
  18.   }
  19. });
  20. </script>


Étape 6 ( ;Faire Look identique ) :


Nous avons maintenant la variable d'espace réservé truquée. Mais attendez, il ne LOOK même, vous dit il serait!! C'est vrai, permet de corriger. Ajoutez le code suivant à l'intérieur de votre &lt;head&gt;, après &lt;/script&gt; tag. Si vous regardez notre code ci-dessus, nous avons ajouté une classe nommée « hasPlaceholder ». Ceci nous permet d'appliquer CSS style du faux texte.
Code: [ Select ]
<style>
.hasPlaceholder {
  color: #777;
}
</style>
  1. <style>
  2. .hasPlaceholder {
  3.   color: #777;
  4. }
  5. </style>

La valeur de couleur #777 ou #777777, appliquera la couleur d'espace réservé par défaut qui est utilisée dans les navigateurs de HTML5, ce qui rendait la même apparence.

Le Code complet :


Si vous avez suivi le guide correctement, vous devriez maintenant avoir le code suivant :
Code: [ Select ]
<html>
<head>
<title>Placeholder Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
  jQuery.support.placeholder = false;
  test = document.createElement('input');
  if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
  if(!$.support.placeholder) {
   var active = document.activeElement;
   $(':text').focus(function () {
     if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
      $(this).val('').removeClass('hasPlaceholder');
     }
   }).blur(function () {
     if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
      $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
     }
   });
   $(':text').blur();
   $(active).focus();
   $('form:eq(0)').submit(function () {
     $(':text.hasPlaceholder').val('');
   });
  }
});
</script>
<style>
.hasPlaceholder {
  color: #777;
}
</style>
</head>
<body>
   <input type="text" name="search" placeholder="Search here..." /> 
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Placeholder Example</title>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5. <script>
  6. // This adds 'placeholder' to the items listed in the jQuery .support object.
  7. jQuery(function() {
  8.   jQuery.support.placeholder = false;
  9.   test = document.createElement('input');
  10.   if('placeholder' in test) jQuery.support.placeholder = true;
  11. });
  12. // This adds placeholder support to browsers that wouldn't otherwise support it.
  13. $(function() {
  14.   if(!$.support.placeholder) {
  15.    var active = document.activeElement;
  16.    $(':text').focus(function () {
  17.      if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
  18.       $(this).val('').removeClass('hasPlaceholder');
  19.      }
  20.    }).blur(function () {
  21.      if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
  22.       $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
  23.      }
  24.    });
  25.    $(':text').blur();
  26.    $(active).focus();
  27.    $('form:eq(0)').submit(function () {
  28.      $(':text.hasPlaceholder').val('');
  29.    });
  30.   }
  31. });
  32. </script>
  33. <style>
  34. .hasPlaceholder {
  35.   color: #777;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40.    <input type="text" name="search" placeholder="Search here..." /> 
  41. </body>
  42. </html>


Conclusion :



Cela va maintenant travailler dans n'importe quel navigateur soutenant les CSS et Javascript (qui en théorie devrait être chacun d'entre eux).

Veuillez publier si vous avez rencontré des problèmes ou les pépins avec le code ci-dessus ou si vous avez des questions sur la modification ou étendant.
Every job is a self-portrait of the person who did it: Autograph your work with excellence.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Août 3rd, 2011, 6:09 pm

  • jhmcg
  • Born
  • Born
  • No Avatar
  • Inscription: Mai 01, 2012
  • Messages: 1
  • Status: Offline

Message Mai 1st, 2012, 10:33 am

Ce tutoriel a été grand. Le &lt;text&gt; fonctionne pour moi avec IE, FF, Saf, Chrome.
Problème est je ne peux le concept de travailler avec &lt;textarea&gt; cols = « 40 » lignes = « 10 » en HTML5.

EDIT : Enfin mettre les éléments dans l'ordre approprié et &lt;textarea&gt; travaille avec des espaces réservés comme le filigrane dans FF, Chrome, Safari Windows, Apple Safari, mais pas les filigranes dans IE8 sur la machine XP ou annoncée sur machine 64 bits même si les filigranes &lt;text&gt; démontrent le IE8 &amp; 9. Je suppose qu'il y aucune façon autour de cela. Si quelqu'un connaît qu'une solution veuillez me le faire savoir.
Merci encore jhmcg

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 2 messages
  • Modérateur: Tutorial Writers
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC