Retour à Forum de site web

Boîte de recherche filigrane

  • tastysite
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Avr 09, 2008
  • Messages: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Message Novembre 28th, 2009, 10:19 am

Je veux avoir une zone de texte qui a du texte dans le dire Boîte de recherche et lorsque vous cliquez dessus il efface alors vous pouvez chercher quelque chose. Mais si la case est donc évident qu'il sera de nouveau entrer les mots Boîte de recherche revenir, même si je tape sur un terme et cliquez ensuite sur le terme que je ne veux pas qu'elle clair que j'ai essayé de le faire en utilisant JavaScript, mais pas allés très loin.
Voici ce que j'ai obtenu
Code: [ Select ]
<input type="text" name="learnBox" id="learnBox" onclick="this.value=''" value="Enter a subject, video title or video ID" />
^__^
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Novembre 28th, 2009, 10:19 am

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Novembre 28th, 2009, 11:22 am

Êtes-vous d'utiliser toutes sortes de bibliothèques JavaScript, comme jQuery, Prototype, etc sur vos pages déjà?
Strong with this one, the sudo is.
  • tastysite
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Avr 09, 2008
  • Messages: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Message Novembre 28th, 2009, 11:50 am

pas à ce moment - JavaScript est un peu une inconnue pour moi im just getting started avec elle.
^__^
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Novembre 28th, 2009, 12:17 pm

Youll souhaitez utiliser le "onfocus" et "onblur" événements héritage au lieu du onclick "évènement" legs.

L'événement se déclenche lorsque quelqu'un se concentrer sélectionne la zone de texte pour faire une édition, et le flou événement se déclenche quand theyre pas d'édition plus il.

HTML Code: [ Select ]
<input type="text" name="learnBox" id="learnBox" value="" />
<script type="text/javascript">
var default_lb = 'Enter a subject, video title or video ID';
var lb = document.getElementById('learnBox');
lb.value = default_lb;
lb.onfocus = function()
{
   if(lb.value == default_lb)
   {
      lb.value = '';
   }
}
lb.onblur = function()
{
   if(lb.value == '')
   {
      lb.value = default_lb;
   }
}
</script>
  1. <input type="text" name="learnBox" id="learnBox" value="" />
  2. <script type="text/javascript">
  3. var default_lb = 'Enter a subject, video title or video ID';
  4. var lb = document.getElementById('learnBox');
  5. lb.value = default_lb;
  6. lb.onfocus = function()
  7. {
  8.    if(lb.value == default_lb)
  9.    {
  10.       lb.value = '';
  11.    }
  12. }
  13. lb.onblur = function()
  14. {
  15.    if(lb.value == '')
  16.    {
  17.       lb.value = default_lb;
  18.    }
  19. }
  20. </script>
Strong with this one, the sudo is.
  • ultimate11
  • Student
  • Student
  • No Avatar
  • Inscription: Fév 02, 2011
  • Messages: 86
  • Status: Offline

Message Juillet 31st, 2011, 10:05 pm

gars il est beaucoup plus simple...:mrgreen:
Code: [ Select ]
<input type="text" name="learnBox" onfocus="this.value=''" onblur="this.value='Search'" value="Search"/>
  • 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, 5:34 pm

Utilisez l'espace réservé.

Code: [ Select ]
<input type="text" id="search" placeholder="Search..." />


Support de navigateur
Chrome
Firefox 3.7 +
Internet Explorer 9 +
Avant Browser(Not sure)
Opéra (quelque part autour de 11 v)
Safari 4 +

Évidemment pas tout le monde s'exécute un navigateur HTML5, pourtant, donc allaient avoir besoin de ce faux pour les navigateurs autres, inférieures.

Ajouter à la tête de chaque page, ou de l'ajouter à un script distinct et l'appeler sur chaque page :
Code: [ Select ]
<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>
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <script>
  3. // This adds 'placeholder' to the items listed in the jQuery .support object.
  4. jQuery(function() {
  5.   jQuery.support.placeholder = false;
  6.   test = document.createElement('input');
  7.   if('placeholder' in test) jQuery.support.placeholder = true;
  8. });
  9. // This adds placeholder support to browsers that wouldn't otherwise support it.
  10. $(function() {
  11.   if(!$.support.placeholder) {
  12.    var active = document.activeElement;
  13.    $(':text').focus(function () {
  14.      if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
  15.       $(this).val('').removeClass('hasPlaceholder');
  16.      }
  17.    }).blur(function () {
  18.      if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
  19.       $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
  20.      }
  21.    });
  22.    $(':text').blur();
  23.    $(active).focus();
  24.    $('form:eq(0)').submit(function () {
  25.      $(':text.hasPlaceholder').val('');
  26.    });
  27.   }
  28. });
  29. </script>
  30. <style>
  31. .hasPlaceholder {
  32.   color: #777;
  33. }
  34. </style>


Ce que le code ci-dessus, est vérifiez si le navigateur est compatible avec l'espace réservé. Si elle n'est pas le cas, il imite l'effet à l'aide de CSS. La valeur de la couleur à l'intérieur de la .hasplaceholder est la couleur du texte truqué espace réservé à l'intérieur de votre zone de texte. #777 est la valeur d'espace réservé par défaut.

Maintenant, chaque navigateur unique qui prend en charge les CSS peut utiliser cette fonctionnalité.


Un exemple complet :
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>


Exemple : lien

Espère que cette aide, jouir.
Every job is a self-portrait of the person who did it: Autograph your work with excellence.

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 6 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 104 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