Effacer une entrée sur focus avec jQuery et retour sur le flou

Cela fonctionne presque. Cependant, au moment de quitter le champ "defaulttext" apparaît plutôt que le texte original de la valeur. Pas sûr de la façon la plus efficiente de l'echo de la variable à l'intérieur de defaultText.

$(function() { 
var defaultText = $(this).val(); 
$('input[type=text]").focus(function() { 
$(this).val("); 
}); 
$('input[type=text]").blur(function() { 
$(this).val('defaultText'); 
echo 
}); 
});

InformationsquelleAutor cchiera | 2012-01-26

jquery

13
```
$(function() {
    var input = $('input[type=text]');

    input.focus(function() {
         $(this).val('');
    }).blur(function() {
         var el = $(this);

         /* use the elements title attribute to store the 
            default text - or the new HTML5 standard of using
            the 'data-' prefix i.e.: data-default="some default" */
         if(el.val() == '')
             el.val(el.attr('title'));
    });
 });
```
Mise à jour

Navigateurs sont progressivement mise en œuvre de la placeholder attribut, qui offre la possibilité d'afficher une "astuce" pour l'utilisateur.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder
- +1 pour la fixation des erreurs de logique dans le cas des OP de code, pas juste une erreur de syntaxe.
- De toutes les réponses que celui-ci fonctionne, mais requiert l'utilisation de l'attribut title. Est-il un moyen de le faire sans un titre? De sorte que tout site j'utilise le bout de code sur, tous les champs de saisie avec des valeurs effacera au point et de revenir sur la sortie? Même si le site ne marche pas avoir une étiquette de titre sur toutes les entrées?
- utiliser vos propres attributs de préférence à l'aide de la norme HTML5 de data-
- Si vous ne pouvez pas/ne pas modifier le code HTML, alors vous aurez besoin de créer un simple dictionnaire avec les contrôles id et le texte par défaut...
InformationsquelleAutor xandercoded

Vous devez supprimer les ' marques autour de la defaultText variable dans votre méthode set (val).

Essayer quelque chose de hte le long de lignes de

$(function() {
    var defaultText = '';
    $('input[type=text]').focus(function() {
        defaultText = $(this).val();
        $(this).val('');
    });
    $('input[type=text]').blur(function() {
        $(this).val(defaultText); //NB removed the ' ' marks
        //echo //What are you trying to echo? 
     });
 });

Celui-ci ne fonctionne pas.
Hmm ok je vais corriger ça quand je rentre à la maison. Bravo pour me laisser savoir

InformationsquelleAutor Dave Walker

Cette solution nécessite jQuery!

J'ai enveloppé cette fonctionnalité dans un module utils comme suit:

var utils = (function () {
    var utils = {};
    //some other properties...
    utils.setupAutoclearInputs = function() {
        $('.input-autoclear').each(function() {
            $(this).data('default', $(this).val()).addClass('gray');
        }).focus(function(e) {
            if (!($(this).val() !== $(this).data('default'))) {
                $(this).removeClass('gray').addClass('black').data('modified', true).val('');
            }
        }).blur(function(e) {
            if (!($(this).val() !== $(this).data('default')) || $(this).val() === '') {
                $(this).removeClass('black').addClass('gray').val($(this).data('default'));
            }
        });
    }
    //some other methods...
    return utils;
}());

Dans le code HTML:

Ajouter: class="input-autoclear" pour chaque entrée que vous souhaitez inclure.

Définir la valeur par défaut: <input ... value="defaultValue" ... >

Créer des classes css pour les niveaux de gris et noir, texte ou ce que vous voulez.

Personnellement, je suis en utilisant .gray { ... } et .black { ... } mais vous pouvez mieux les noms.

Enfin:

Feu le utils modules à l'aide de la méthode:

$(document).ready(function() {
    ...
    utils.setupAutoclearInputs();
    ...
}

Assurez-vous que le code pour le module habite à l'extérieur du document.prêt appel et vous voudrez sans doute dans la portée globale de votre application.

Pour en savoir plus sur la bonne javascript module d'écriture, visitez ce l'article.

InformationsquelleAutor mattdlockyer

2

Celui-ci va enregistrer le texte par défaut à l'aide de l' .fonction data (). Donc pas besoin d'un surplus de balisage.
```
$('input').focus(function() {
    if (!$(this).data("DefaultText")) $(this).data("DefaultText", $(this).val());
    if ($(this).val() != "" && $(this).val() == $(this).data("DefaultText")) $(this).val("");
}).blur(function(){
    if ($(this).val() == "") $(this).val($(this).data("DefaultText"));
});
```
- Après que vous soumettez le formulaire et de le pousser en arrière dans le navigateur, il ne fonctionne pas bien. Il utilise la valeur que vous avez indiquée lors de la présentation précédente, comme le texte par défaut, donc si vous désactivez-la et cliquez en dehors de cela, il n'utilise pas l'original DefaultText. Toutes les idées sur la façon de résoudre?
InformationsquelleAutor Djesse
1

Simpl écrire $(this).val(defaultText): sans le "s d'autre il l'habitude de la considérer comme une variable.

InformationsquelleAutor Jonas m
1

Utilisation de HTML5, l'attribut espace réservé sur chaque balise d'entrée, par exemple:
```
<input type="text" value="original text value" placeholder="default value" />
```
InformationsquelleAutor Tici

Je funetuned ce code peu.

$(document).ready(function () {
    var defaultText = '';
    $('.input-focus-clear').focus(function () {
        defaultText = $(this).val();
        $(this).val('');
    });
    $('.input-focus-clear').blur(function () {
        var newText = $(this).val();
        if (newText.length < 1) {
           $(this).val(defaultText);
        }
    });
});

InformationsquelleAutor Tarmo

0

Essayer dans votre firebug:
```
$(function() { console.log($(this)) });
```
Vous trouverez que
```
var defaultText = $(this).val();
```
est probablement pas ce que vous voulez.

Si la valeur initiale de l'entrée est le texte par défaut, l'obtenir comme ceci:
```
var defaultText = $('input[type=text]').val()
```
Être conscient que cela ne peut fonctionner correctement que s'il y a une saisie de texte sur votre page.

Et également supprimer des citations en:
```
$(this).val('defaultText');
```
- Merci. Bien que depuis les pages web peuvent avoir plusieurs entrées ne serait pas pratique pour moi en utilisation réelle, mais merci pour l'idée.
InformationsquelleAutor clime
0

Vous êtes pas référence à la variable defaultText. Vous êtes de passage d'une chaîne, car il est enveloppé dans des guillemets.
```
$(function() {
    var defaultText = $('input[type=text]').val();
    $('input[type=text]').focus(function() {
      $(this).val('');
      });
     $('input[type=text]').blur(function() {
      $(this).val(defaultText); //fixed!
      });
 });
```
- Avec cela, le texte ne renvoie jamais à la sortie.
- Désolé, fixé maintenant. Vous étiez à l'aide de la this mot-clé mal à accéder à la valeur de la variable defaultText. Si vous avez besoin d'aide pour comprendre le this mot-clé, ici, est une bonne ressource: learningjquery.com/2007/08/what-is-this
InformationsquelleAutor shaunsantacruz

var q = $('#q');
q.focus(function() {
    if ($(this).attr('data-default') == $(this).val()) {
        $(this).val('');
    }
}).blur(function() {
    if($(this).val() == '') {
        $(this).val($(this).attr('data-default'));
    }
});


<input type="text" name="q" id="q" data-default="Search..." value="Search..."/>

InformationsquelleAutor lokers

   $('.myclass').each(function() {
    var default_value = this.value;
    $(this).css('color', '#666'); //this could be in the style sheet instead
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
            $(this).css('color', '#333');
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            $(this).css('color', '#666');
            this.value = default_value;
        }
    });
});
<input type="text" class="myclass" size="30" value="type here" />

InformationsquelleAutor Zamir10

C'est le travail! J'utilise moi-même:

/* Forminputs löschen und wiederherstellen */
jQuery(function() {
    var input = jQuery('#userForm input[type=text], #userForm textarea');

    input.focus(function() {

        jQuery(this).attr('data-default', jQuery(this).val());
        jQuery(this).val('');

    }).blur(function() {
        var el = jQuery(this);

        if (el.val() == '')
            el.val(el.attr('data-default'));
    });
});

InformationsquelleAutor Andreas

Vous devez vous connecter pour publier un commentaire.