Javascript Girl
  1. Javascript Girl
  3. Javascript vers Jquery, ajoutez du texte dans la saisie onclick
Intereting Posts
Le mouse mouseaveave et un select Troubles avec les bibliothèques Tornado et JavaScript Comment éviter le clic-droit du navigateur? Les méthodes d'objet attribuées aux variables ou aux arguments de la fonction échouent lorsqu'elles sont invoquées Arrays de type JavaScript dans JAVA Module.exports vs exports dans Node.js Activez la pseudo-classe CSS active d'un élément en utilisant Javascript? Graphique de la bibliothèque JavaScript JQuery – Détecte le changement de valeur qui utilise la fonction .val () Trois.js – dessinant deux sphères transparentes se chevauchant et coinçant l'intersection Comment sélectionner une option avec CasperJS Image d'arrière-plan aléatoire en plein écran sur rafraîchissement du navigateur Mettez en surbrillance un mot avec jQuery Jquery a différé dans .each loop Modules JavaScript, fermetures et portée

Javascript vers Jquery, ajoutez du texte dans la saisie onclick

Comment puis-je modifier ce code javascript vers JQuery? 

<script type="text/javascript"> function addTextTag(text){ document.getElementById('text_tag_input').value += text; } </script>

Lorsqu'un utilisateur clique sur le texte du lien automatiquement est ajouté en entrée.

C'est le HTML: 

 <input id="text_tag_input" type="text" name="tags" /> <div class="tags_select"> <a href="#" onClick="addTextTag('text1, '); return false">text1</a> <a href="#" onClick="addTextTag('text2, '); return false">text2</a> <a href="#" onClick="addTextTag('text3, '); return false">text3</a> </div>

Voici la démo: http://jsfiddle.net/Smartik/j8qGT/ 

 <script type="text/javascript"> $(function() { $('.tags_select a').click(function() { var value = $(this).text(); var input = $('#text_tag_input'); input.val(input.val() + value + ', '); return false; }); }); </script>

Et votre balisage: 

 <input id="text_tag_input" type="text" name="tags" /> <div class="tags_select"> <a href="#">text1</a> <a href="#">text2</a> <a href="#">text3</a> </div>

Et voici une démo en direct .

Sans javascript en ligne, complètement jQuery: http://jsfiddle.net/j8qGT/3/

JavaScript: 

 $('a').click(function(){ $('#text_tag_input').val($('#text_tag_input').val()+$(this).html()+', '); });​

HTML: 

 <input id="text_tag_input" type="text" name="tags" /> <div class="tags_select"> <a href="#">text1</a> <a href="#">text2</a> <a href="#">text3</a> </div>​

Quelques notes sur les étapes:

  • Sélectionnez déjà l'entrée où définir la valeur afin d'éviter la nécessité de la ré-interroger tout le temps: var $tagsInput = $('#text_tag_input'); . Le sélecteur d'étiquette hash si le sélecteur ID dans jQuery remplace document.getElementById

  • Lier un événement de clic avec .click () pour les liens dans l'élément avec la classe "tags_select": `$ ('. Tags_select a'). Cliquez (…);` `

  • Pour ajouter la valeur, au lieu de lutter contre les méthodes jquery pour obtenir et définir la valeur de l'entrée, obtenez l'élément $tagsInput natif avec [0] sur $tagsInput et utilisez la += notation de la value de la propriété.

Voici le code: 

 // select already you input element for re-use var $tagsInput = $('#text_tag_input'); // bind a click event to links within ".tags-select" element $('.tags_select a').click(function() { // append link text to the input field value $tagsInput[0].value += $(this).text(); return false; });

DEMO

Autres lectures:

  • Sélecteurs jQuery
  • Liez un événement de clic avec .click ()