texte indisponible pour la fonction de recherche

Je cherche à créer un champ de saisie de texte qui a grisés texte qui montre ce que le champ de texte est utilisé pour, ce texte devrait être ensuite retiré quand un personnage est entréetexte indisponible pour la fonction de recherche

par exemple dans facebook Lorsque vous cliquez sur la zone de texte de recherche, avant d'entrer des caractères, le mot "search" s'affiche toujours.

Je ne sais pas où commencer à JQuery comme je ne sais pas ce que cette fonction est appelée, mais au-dessous est la majoration pour mon champ d'entrée

HTML Markup

<div class="searchForm"> 
    <input id="searchInput" value="Search" autocomplete="off" name="searchInput" 
     onkeyup="showResult(this.value)"/> 
    <input type="hidden" name="searchSite" value="1" style="background-color:#000;"> 
    <input id="searchButton" type="submit" value=""/> 
</div>

Source

2012-05-25 mk_89

Je viens de trouver ce lien qui pourrait aider les gens à l'avenir http://viget.com/inspire/a-better-jquery-in-field-label-plugin –

vous pouvez envelopper l'entrée avec une balise div , placez-le relativement, ajoutez une durée absolue comme espace réservé et supprimez-la. – undefined

Comme les autres réponses suggérées, je suggère d'utiliser le HTML 5 placeholder attribut . Pour les navigateurs qui ne prennent pas en charge, vous pouvez ajouter le support comme suit:

// 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; 
}); 

$(function() { 
    // add placeholder support to browsers that wouldn't otherwise support it. 
    if (!$.support.placeholder) { 
     var active = document.activeElement; 
     $(':text,:password').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,:password').blur(); 
     $(active).focus(); 
     $('form:eq(0)').submit(function() { 
      $(':text.hasPlaceholder,:password.hasPlaceholder').val(''); 
     }); 
    } 
});

Ce code est originaire d'ici: http://www.cssnewbie.com/example/placeholder-support/

je l'ai modifié pour supporter les champs de mot de passe (bien qu'ils viennent apparaissent comme * s) et l'ont utilisé avec succès. Je l'aime parce que je viens d'utiliser l'attribut HTML placeholder et tout fonctionne bien dans tous les domaines.

Espérons que cela aide!

Source

2012-05-25 21:45:05 christurnerio

Je n'ai pas testé cela mais serait-il suffisant de mettre ce code dans la tête de ma page html? –

La nouvelle meilleure pratique semble être de placer votre code js à la fin de votre page afin que les choses se chargent plus vite. Ensuite, vous n'avez pas besoin d'enrouler le code dans $ (document) .ready() fn() {}); Cela dit, ma suggestion serait de placer cela dans

Vous pouvez utiliser l'attribut placeholder comme html 5 ceci:

<input id="searchInput" type="text" placeholder="Search" name="searchInput" />

Source

2012-05-25 21:26:29 WojtekT

C'est une bonne réponse, cela a bien fonctionné, je me demandais juste ce que je peux faire à propos des navigateurs qui ne supportent pas le HTML 5? –

Ceci est d'une autre answer of mine. Et this est un exemple de travail de cette pièce de code.

HTML

<div> 
    <label for="search">Search this site</label> 
    <input type="text" id="search" value="" /> 
</div>

CSS

body { padding: 20px; } 

div { position: relative; } 
div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; } 
div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; } 
.populated label { display: none; } 
.focused label { color: #aaa; }

Javascript

$('input').on('keydown keypress keyup', function(e) { 
    if($('input').val() == '') { 
     $('div').removeClass('populated'); 
    } 
    else { 
     $('div').addClass('populated'); 
    } 
}).on('focus', function(e) { 
    $('div').addClass('focused'); 
}).on('blur', function(e) { 
    $('div').removeClass('focused'); 
});

Source

2012-05-25 21:29:51

Il y a quelques façons de le faire. En utilisant HTML5, cela peut être facilement réalisé en utilisant un attribut d'espace réservé. Cela vous permet de définir le texte dans l'élément HTML, et au focus cela disparaîtra.

<input id="searchInput" value="Search" autocomplete="off" name="searchInput" placeholder="Search" 
     onkeyup="showResult(this.value)"/>

Autres façons JavaScript de le faire sont d'utiliser des méthodes qui défrichent le texte mise au point ou cliquez etc.

$('input#searchInput').focus(function() { 
    $(this).value(''); 
});

Source

2012-05-25 21:30:37

La version de jQuery (pas JS) fait disparaître le texte si l'utilisateur ne tape rien après que l'entrée ait été reçue et que le focus soit perdu. Le texte original devrait réapparaître dans ce cas. – FelipeAls

Si vous utilisez HTML5, vous devez utiliser le placeholder attribute.

Si vous utilisez HTML4.01 ou XHTML1.0 puis voir édition finale de cette question: unobtrusive "default" text in input WITHOUT jQuery (avec jQuery, enfin)

Source

2012-05-25 21:30:55 FelipeAls

Questions connexes

texte indisponible pour la fonction de recherche

Répondre

Questions connexes