jQuery Girl
  1. jQuery Girl
  3. jquery obtient la position du curseur après un clic
Intereting Posts
Javascript convertit la chaîne de requête en JSON à l’aide de jQuery et retourne à la chaîne de requête Existe-t-il un moyen de se lier à l’événement load () d’une image après avoir modifié sa src? genvalidator: cochez la case dans la validation du formulaire Comment vérifier si une fonction est déjà définie? graphique en anneau JS / Jquery qui autorise les balises HTML dans son étiquette? Pourquoi la méthode .on () n’exécute-t-elle pas le premier gestionnaire? Récupère le texte entre crochets Peut-on exécuter des requêtes SQL dans JQuery Comment inclure jQuery dans la page ASP.net? Animation SVG Progressbar avec cercle de départ PHP – L’appel Ajax n’exécutera pas l’API sans wait / print_r Les points jqPlot ne sont pas corrects lorsque numberTicks est défini JQuery UI DatePicker utilisant 2 champs de date essayant d’obtenir la différence de date Contrôler le nombre d’éléments sur chaque ligne flexible lorsque le conteneur est configuré pour envelopper comment sortinger les données XML dans jQuery

jquery obtient la position du curseur après un clic

J’ai un formulaire avec de nombreuses entrées / textareas, l’administrateur utilisant le formulaire peut append des valeurs dynamics au texte, par exemple: page title = “Bonjour {name}, bienvenue dans {shop_name}”. Au bas du formulaire, j’ai une liste de toutes les valeurs dynamics disponibles.

Q: Ce que j’essaie de faire, c’est de cliquer sur une valeur de la liste. Elle découvre l’entrée précédente sur le focus et insère la valeur.

En termes plus simples, comment ferais-je pour que jsFiddle fonctionne pour cette entrée = texte de la même manière que pour textarea? Donc, si j’avais le curseur dans le champ de saisie, cela appendait la valeur foo à la place de textarea.

HTML 

      
 
Insert short code

JS 

 jQuery.fn.extend({ insertAtCaret: function (myValue) { return this.each(function (i) { if (document.selection) { //For browsers like Internet Explorer this.focus(); var sel = document.selection.createRange(); sel.text = myValue; this.focus(); } else if (this.selectionStart || this.selectionStart == '0') { //For browsers like Firefox and Webkit based var startPos = this.selectionStart; var endPos = this.selectionEnd; var scrollTop = this.scrollTop; this.value = this.value.subssortingng(0, startPos) + myValue + this.value.subssortingng(endPos, this.value.length); this.focus(); this.selectionStart = startPos + myValue.length; this.selectionEnd = startPos + myValue.length; this.scrollTop = scrollTop; } else { this.value += myValue; this.focus(); } }); } }); $(".inserts a").click(function (e) { e.preventDefault(); $('textarea').insertAtCaret( $(this).data("foo") ); });

Une approche simple consisterait à stocker la dernière position du curseur dans le champ de saisie d’une variable. Lorsque vous cliquez sur un bouton, vous pouvez facilement insérer la valeur à la position souhaitée. Assez de matière à reflection? 😉

EDIT: Pour insérer la chaîne à la position x, vous pouvez utiliser ce plugin jQuery caret ou scinder le contenu d’entrée d’origine à la position x et append le nouveau contenu entre les deux.

Peut-être que vous voulez aussi jeter un coup d’œil à ce fil

Ma solution serait la suivante: 

 var pos = 0; $('yourField').on('click keypress', function () { pos = $(this).caret().start }); // inside your click function you can use the following // $.fn.caretTo( index , [ offset ] ) // to add input to a specific position