Modifier le texte d'entrée les valeurs de manière dynamique

Ma question est peut-être assez facile pour vous les gars, mais c'est dur pour moi...

J'ai un champ de texte et je veux changer sa valeur entre une fois <label id="some_id"> est cliqué. Jusqu'à ce que j'ai décrit maintenant, je peux le faire moi-même avec jQuery, mais voici la partie complexe (pour moi, évidemment):

J'ai deux valeurs que je veux pour que le champ de texte, et une fois que <label> est cliqué, il passe à la valeur qui n'est pas montré, mais une fois que nous sur il nouveau, il remonte à l'origine du texte du champ de texte contenues.

Je dois garder mon jQuery/JS interne car je obtenir les valeurs souhaitées à partir de la base de données et je ne veux pas faire mon .js fichiers .php.

C'est ce que j'ai:

<label for="html" onclick="$('#html').val('<?php echo $image->convert('html_b', $image_data['image_link']); ?>')">HTML:</label>
<input type="text" id="html" value="<?php echo $image->convert('html_a', $image_data['image_link']); ?>" readonly />

Il fait la première partie j'ai besoin, en modifiant la valeur du champ à la nouvelle valeur, mais une fois ce bouton cliqué de nouveau, je veux que le texte original.

Merci.

  • avant d'écraser la valeur avec les cliqué sur l'étiquette, de conserver l'original dans une variable js et tout simplement utiliser la valeur d'origine à nouveau lorsque cliqué sur le deuxième temps
InformationsquelleAutor Dugi | 2012-12-29
  1. 4

    Vous pouvez comparer sa valeur actuelle à la disposition des possibilités.

    <label id="toggle" for="stuff">I'm a label</label>
<input type="text" val="" name="stuff" id="stuff">​
    var possibilities = ["foo", "bar"];

$('#toggle').click(function(){
    var old_val = $("#stuff").val(), new_val;
    if (old_val == possibilities[0])
        new_val = possibilities[1];
    else
        new_val = possibilities[0];

    $("#stuff").val(new_val);

});​

    démo

    InformationsquelleAutor Brigand
  2. 7

    Tout d'abord, ne pas utiliser de JavaScript en ligne.

    Vous pouvez utiliser une combinaison de .toggle() et data-* attributs pour cette. Par exemple, à l'aide d'un data-toggle attribut pour la valeur que vous souhaitez activer avec.

    <label for="html" data-toggle="This is a placeholder">HTML:</label>
<input type="text" id="html" value="This is my real value" readonly>​

    $("label[for][data-toggle]").each(function() {
    var $this = $(this);
    var $for = $("#" + $this.attr("for"));
    var originalValue;
    $this.toggle(function() {
        originalValue = $for.val();
        $for.val($this.data("toggle"));
    }, function() {
        $for.val(originalValue);
    });
});​

    le Voir ici.

    Mise à JOUR #1

    J'ai ajouté de l'utilisation de for attribut de <label>.

    Mise à JOUR #2

    Si vous ne souhaitez pas utiliser .toggle() en raison de la dépréciation de l'avis.

    $("label[for][data-toggle]").each(function() {
    /* cache */
    var $this = $(this);
    var $for = $("#" + $this.attr("for"));
    var originalValue = $for.val();
    /* state variable */
    var which = 0;
    $this.click(function() {
        $for.val(which ? originalValue : $this.data("toggle"));
        which = 1 - which;
    });
});​

    Voir le non-.toggle() alternative ici.

    • toggle méthode est obsolète.
    • depuis?
    • Depuis jQuery 1.7
    • Je ne vois pas l'abandon de la note n'importe où. De référence?
    • Vous pouvez le trouver ici api.jquery.com/category/deprecated
    • Je vais apporter une alternative

    InformationsquelleAutor Alexander
  3. 4

    Pour ce faire, sur le premier bouton, cliquez sur vous avez besoin pour stocker la valeur actuelle de l'entrée dans une variable et ensuite sur la 2ème clic, vous pouvez affecter cette variable à la valeur d'entrée. Si vous ne voulez avoir js fichiers, vous pouvez simplement utiliser <script></script> balises pour écrire le jquery.

        `<label id="label" onclick="replaceText('newvalue')">Click Mee</label>
<input id="html" type="text" value="some value">

    <script>
        var currentValue="";
   function replaceText(newval){
       currentValue= $("#html").val();
        if(currentValue!=newval)
        $("#html").val(newval);
   $("#label").attr("onclick","replaceText('"+currentValue+"')");//Here we assigned the other value to label onclick function so that it will keep on toggling the content.
   }
    </script>`

    DÉMO ICI

    • J'ai fait une fonction très simple, c'est censé basculer les valeurs à chaque fois il est cliqué 🙂 cheers!!
    InformationsquelleAutor Ankush
  4. 1

    Vous pouvez stocker les valeurs dans des variables JavaScript et l'utilisation de jQuery click méthode au lieu de onclick attribut.

    var def = "<?php echo $image->convert('html_a', $image_data['image_link']); ?>",
    up = "<?php echo $image->convert('html_b', $image_data['image_link']); ?>";

$('label[for=html]').click(function() {
    $('#html').val(function(i, currentValue) {
        return currentValue === def ? up : def;
    });
});
    InformationsquelleAutor undefined