Comment puis-je effacer le texte saisi après avoir cliqué

Pour supprimer le texte par défaut, en cliquant sur l’élément:

 $('input:text').click( function(){ $(this).val(''); }); 

Je suggérerais cependant d’utiliser focus() place:

 $('input:text').focus( function(){ $(this).val(''); }); 

Qui répond également aux événements du clavier (la touche de tabulation, par exemple). En outre, vous pouvez utiliser l’atsortingbut d’ placeholder dans l’élément:

Ce qui effacera sur la mise au sharepoint l’élément, et réapparaîtra si l’élément rest vide / l’utilisateur n’entre rien.

Mise à jour: J’ai pris votre dicton “click” littéralement, ce qui était un peu idiot de ma part. Vous pouvez remplacer le focus par un click sur tout ce qui suit si vous souhaitez également que l’action se produise lorsque l’utilisateur accède à l’entrée, ce qui semble probable.

Mise à jour 2: Je suppose que vous cherchez à faire des marques de réservation; voir note et exemple à la fin.

Réponse originale :

Tu peux le faire:

 $("selector_for_the_input").click(function() { this.value = ''; }); 

… mais cela effacera le texte indépendamment de ce que c’est. Si vous ne voulez que l’effacer si c’est une valeur spécifique:

 $("selector_for_the_input").click(function() { if (this.value === "TEXT") { this.value = ''; } }); 

Par exemple, si l’entrée a un id , vous pouvez faire:

 $("#theId").click(function() { if (this.value === "TEXT") { this.value = ''; } }); 

Ou si c’est dans un formulaire avec un id (disons “myForm”) et que vous voulez le faire pour chaque champ de formulaire:

 $("#myForm input").click(function() { if (this.value === "TEXT") { this.value = ''; } }); 

Vous pouvez aussi le faire avec délégation:

 $("#myForm").delegate("input", "click", function() { if (this.value === "TEXT") { this.value = ''; } }); 

Cela utilise delegate pour connecter un gestionnaire sur le formulaire, mais l’applique aux entrées du formulaire, plutôt que de connecter un gestionnaire à chaque entrée individuelle.

Si vous essayez de faire des espaces réservés, il y a plus que cela et vous voudrez peut-être trouver un bon plug-in pour le faire. Mais voici les bases:

HTML:

 
 Field 1:   
Field 2:   
Field 3:    

JavaScript en utilisant jQuery:

 jQuery(function($) { // Save the initial values of the inputs as placeholder text $('#theForm input').attr("data-placeholdertext", function() { return this.value; }); // Hook up a handler to delete the placeholder text on focus, // and put it back on blur $('#theForm') .delegate('input', 'focus', function() { if (this.value === $(this).attr("data-placeholdertext")) { this.value = ''; } }) .delegate('input', 'blur', function() { if (this.value.length == 0) { this.value = $(this).attr("data-placeholdertext"); } }); }); 

Copie en direct

Bien sûr, vous pouvez également utiliser le nouvel atsortingbut d’ placeholder de HTML5 et faire uniquement ce qui précède si votre code est exécuté sur un navigateur qui ne le prend pas en charge, auquel cas vous souhaitez inverser la logique utilisée ci-dessus:

HTML:

 
 Field 1:   
Field 2:   
Field 3:    

JavaScript avec jQuery:

 jQuery(function($) { // Is placeholder supported? if ('placeholder' in document.createElement('input')) { // Yes, no need for us to do it display("This browser supports automatic placeholders"); } else { // No, do it manually display("Manual placeholders"); // Set the initial values of the inputs as placeholder text $('#theForm input').val(function() { if (this.value.length == 0) { return $(this).attr('placeholder'); } }); // Hook up a handler to delete the placeholder text on focus, // and put it back on blur $('#theForm') .delegate('input', 'focus', function() { if (this.value === $(this).attr("placeholder")) { this.value = ''; } }) .delegate('input', 'blur', function() { if (this.value.length == 0) { this.value = $(this).attr("placeholder"); } }); } function display(msg) { $("
").html(msg).appendTo(document.body); } }); 

Copie en direct

(Félicitations à diveintohtml5.ep.io pour le code de détection des fonctionnalités de placholder .)

 $("input:text").focus(function(){$(this).val("")}); 

Vous pourriez essayer ceci

 $('#myFieldID').focus(function(){ $(this).val(''); }); 

Je suppose que vous essayez de créer un effet, où la zone de texte contient une étiquette. Et lorsque l’utilisateur clique dans la zone de texte, il disparaît et laisse l’utilisateur entrer le texte. Vous n’avez pas besoin de Jquery pour cela.

Démo

 function submitForm() { if (testSubmit()) { document.forms["myForm"].submit(); //first submit document.forms["myForm"].reset(); //and then reset the form values } }   
 First Name:  
 Last Name:  
   

Cela a fonctionné pour moi:

  **//Click The Button** $('#yourButton').click(function(){ **//What you want to do with your button** //YOUR CODE COMES HERE **//CLEAR THE INPUT** $('#yourInput').val(''); }); 

Alors d’abord, vous sélectionnez votre bouton avec jQuery:

 $('#button').click(function((){ //Then you get the input element $('#input') //Then you clear the value by adding: .val(' '); }); 

Si vous avez besoin d’un comportement comme un comportement. vous pouvez l’utiliser.

 $("selector").data("DefaultText", SetYourDefaultTextHere); // You can also define the DefaultText as atsortingbute and access that using attr() function $("selector").focus(function(){ if($(this).val() == $(this).data("DefaultText")) $(this).val(''); }); 

essaye ça

 $("input[name=search-mini]").on("search", function() { //do something for search }); 

Il y a une manière élégante de faire ceci:

De cette façon, si vous tapez quelque chose dans la boîte de recherche, il ne sera pas supprimé lorsque vous cliquez à nouveau dans la boîte.

Utiliser jQuery …

 $('#submitButtonsId').click( function(){ $(#myTextInput).val(''); }); 

Utiliser du Javascript pur …

 var btn = document.getElementById('submitButton'); btn.onclick = function(){ document.getElementById('myTextInput').value="" }; 

Je recommande de l’utiliser car j’ai le même problème qui a été corrigé.

 $('input:text').focus( function(){ $(this).val(''); }); 

  enter code here