Comment conserver le bouton de soumission visible et exécutable sur textarea onblur

Question

J'ai une balise <div id="comment_posting_holder"> qui contient un formulaire avec deux éléments: une zone de texte et un bouton de soumission.

Je souhaite que l'étiquette div (contenant la zone de texte et le bouton Soumettre) disparaisse si je clique quelque part sur "AUTRE" que le bouton Soumettre. J'ai un début pour le code ci-dessous. Donc, en quittant le focus de la zone de texte, je peux faire disparaître l'étiquette div.

Le problème est que si le div disparaît, le bouton d'envoi disparaît, ce qui signifie que je ne peux pas soumettre le formulaire! Comment puis-je réparer cela?

Des suggestions? Je vous remercie!

** Facebook fait ceci avec ses commentaires. Si vous cliquez sur un champ "Publiez votre commentaire ...", la zone de texte apparaît et disparaît lorsque vous perdez le focus autrement que si vous avez appuyé sur le bouton Envoyer.

$('textarea').blur(function() { 
    $('#comment_posting_holder').hide(); 
}); 

Answer 1

Si vous voulez une implémentation comme facebook, vous devez vérifier si quelqu'un a écrit quelque chose dans la zone de texte.

Vous pouvez voir ma réponse travailler here

HTML

<div> 
    <textarea class="comment_empty">Write a comment</textarea><br /> 
    <input type="submit" id="submit" value="Submit" style="display: none" /> 
</div> 

jQuery

$(document).ready(function(){ 
    var submit = $("#submit"); 

    $("textarea").blur(function() { 
     if ($(this).val() == "") { 
      $(this).val("Write a comment") 
        .removeClass("comment_filled") 
        .addClass("comment_empty"); 
      submit.hide(); 
     } 
    }).focus(function() { 
     if ($(this).val() == "Write a comment") { 
      $(this).val("") 
        .removeClass("comment_empty") 
        .addClass("comment_filled"); 
      submit.show(); 
     } 
    }); 
}); 

certains CSS

.comment_empty { 
    color: gray; 
    height: 30px; 
} 

.comment_filled { 
    color: black; 
    height: 100px; 
} 

Answer 2

Was ne fonctionne pas en raison de l'erreur de syntaxe dans votre code. Autre que la citation unique manquante, ce que vous avez l'air bien, tant que c'est dans un événement qui est en train de tirer. Essayez ceci:

$(document).ready(function(){ 
    $('textarea').blur(function() { 
     $('#comment_posting_holder').hide(); 
    }); 
}); 

Answer 3

Ce que je comprends que vous voulez:
Si l'utilisateur clique sur ne importe où, et l'élément qui a été cliqué n'a pas été le bouton d'envoi, puis cacher la div.

Code pour le faire:

$(document).ready(function() { 
    $(document).click(function(event) { 
    if (event.target.id == "idOfSubmitButton") { 
     //user clicked the submit button (make sure to give it an ID) 
     //if you wanted to be really hardcore, you could submit the form here via AJAX 
    } 
    else { 
     //user clicked anywhere on the page but the submit button 
     //here you'd want to check and make sure someone has actually typed 
     //something in the textarea, otherwise this will happen for every 
     //click on a hyperlink, button, image, et cetera on the page 
     $('#comment_posting_holder').hide(); 
    } 
    }); 
});