Comment faire pour supprimer la valeur par défaut de l'entrée sur le focus

J'ai une zone de saisie qui a valeur par défaut texte lui est assigné. Comment puis-je supprimer ce texte lorsque l'utilisateur se concentre sur le terrain::

CoDE

<input type="text" name="kp1_description" value="Enter Keypress Description">
InformationsquelleAutor user342391 | 2010-09-27
  1. 16
    $(document).ready(function(){
    var Input = $('input[name=kp1_description]');
    var default_value = Input.val();

    Input.focus(function() {
        if(Input.val() == default_value) Input.val("");
    }).blur(function(){
        if(Input.val().length == 0) Input.val(default_value);
    });
})​

    Cela devrait le faire.

    Mis à jour, Oublié que le focus ne pas avoir un 2ème paramètre pour la focus événement parce qu'il n'y est pas, il a enchaîné avec le flou:

    http://jsfiddle.net/hDCsZ/

    vous devez également penser à créer votre propre fonction pour cette tels que:

    $.fn.ToggleInputValue = function(){
    return $(this).each(function(){
        var Input = $(this);
        var default_value = Input.val();

        Input.focus(function() {
           if(Input.val() == default_value) Input.val("");
        }).blur(function(){
            if(Input.val().length == 0) Input.val(default_value);
        });
    });
}

    Ensuite utiliser comme

    $(document).ready(function(){
    $('input').ToggleInputValue();
})​
    • La valeur n'est pas reappaear si rien n'a été entré.hmm..
    • Mise à jour, Laissez-moi savoir si cela fonctionne.
    • bizarre toujours rien
    • De nouveau mis à jour, désolé im à moitié endormi 🙂
    InformationsquelleAutor RobertPitt
  2. 8

    Ne pas faire de cette façon. Utiliser jQuery filigrane script:
    http://code.google.com/p/jquery-watermark/

    $("input[name='kp1_description']").watermark("Enter Keypress Description");

    Il y a beaucoup de choses que vous devez connaître si vous le faites manuellement. Par exemple, ce qui se passe lorsque la zone de texte perd le focus? Si il n'y a pas de valeur, vous souhaitez readd votre assistant de texte. Si il y est, vous voulez à l'honneur ces changements.

    Plus facile de laisser les autres faire le levage lourd 🙂

    • mais à l'aide d'un ensemble de la bibliothèque pour une simple tâche n'est pas la meilleure idée.
    • Vrai, je suis d'avis que cette roue n'a pas besoin d'être réinventé. Il y a beaucoup de scénarios à envisager et à l'aide de la bibliothèque pouvez simplifier beaucoup de choses. Il a touché sa question avec jQuery en utilisant un plugin jQuery est probablement la manière la plus pragmatique pour accomplir cette tâche.
    • +1 pour la réutilisation du code. Certains problèmes sont difficiles et doit être résolu par une bibliothèque et non réimplémentée mal par tous les code de singe sur la planète. Les gens sont particulièrement mauvais à ce sujet quand il s'agit de javascript.
    • c'est drôle parce que cela peut paraître trivial, mais en fait il y a beaucoup de choses à considérer...
    InformationsquelleAutor clifgriffin
  3. 6

    Avec HTML5 vous pourriez le faire sans Javascript: il suffit d'utiliser espace réservé au lieu de value.
    Je pense que c'est un petit plus, mais bien sûr, vous avez besoin de vérifier la compatibilité de votre navigateur en premier.

    InformationsquelleAutor pera
  4. 4
    <input type="text" id="anything" placeholder="enter keypress description">

    je pense que cela va aider à

    InformationsquelleAutor kkk
  5. 3
    $('input, textarea').each(function () {
    var Input = $(this);
    var default_value = Input.val();

    Input.focus(function() {
        if(Input.val() == default_value) Input.val("");
    }).blur(function(){
        if(Input.val().length == 0) Input.val(default_value);
    });
});
    InformationsquelleAutor bruno
  6. 1

    var defaultForInput = "abc";

    <input id="myTextInput" type="text" placeholder=defaultForInput />

    Lors de la soumission de votre formulaire, vérifiez si l'entrée(id="myTextInput") est la valeur de "vide-chaîne", si donc le remplacer par (defaultForInput).

    InformationsquelleAutor Bennj
  7. 1

    Le Super Duper Version Courte

    $('#input_id').focus(function() {
    $(this).val("");
});
    InformationsquelleAutor Abram
  8. 0

    HTML:

    <form method="post">
  <input type="text" id="customer" value="Username"/>      
  <input type="Submit" value="Login" class="rc" />
</form>

    Code Javascript:

    <script>
$('#customer').on({
    focus:function(){                   
      if(this.value == 'Username') this.value = '';
    },
    blur:function(){
      if(this.value == '') this.value = 'Username';
    }
})
</script>

    C'est tout, j'espère que ça vous aidera.

    InformationsquelleAutor Dhaval
  9. 0

    Plaine JavaScript:

    (function () {
  let input = document.querySelector ("input[name='kp1_description']");
  input.onfocus = function () {
    this.placeholder = this.value;
    this.value = '';
  };
})();

    Cela permet de maintenir la valeur dans l'espace réservé au lieu de le supprimer complètement. Si vous n'aimez pas cela, supprimer l'espace réservé à la ligne.

    InformationsquelleAutor ceving