Insertion d'un texte où le curseur utilise Javascript / jquery

Utilisez ceci, d' ici :

function insertAtCaret(areaId, text) { var txtarea = document.getElementById(areaId); if (!txtarea) { return; } var scrollPos = txtarea.scrollTop; var strPos = 0; var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) ); if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); strPos = range.text.length; } else if (br == "ff") { strPos = txtarea.selectionStart; } var front = (txtarea.value).substring(0, strPos); var back = (txtarea.value).substring(strPos, txtarea.value.length); txtarea.value = front + text + back; strPos = strPos + text.length; if (br == "ie") { txtarea.focus(); var ieRange = document.selection.createRange(); ieRange.moveStart ('character', -txtarea.value.length); ieRange.moveStart ('character', strPos); ieRange.moveEnd ('character', 0); ieRange.select(); } else if (br == "ff") { txtarea.selectionStart = strPos; txtarea.selectionEnd = strPos; txtarea.focus(); } txtarea.scrollTop = scrollPos; } 

 <textarea id="textareaid"></textarea> <a href="#" onclick="insertAtCaret('textareaid', 'text to insert');return false;">Click Here to Insert</a> 

Peut-être une version plus courte, serait-elle plus facile à comprendre?

  jQuery("#btn").on('click', function() { var $txt = jQuery("#txt"); var caretPos = $txt[0].selectionStart; var textAreaTxt = $txt.val(); var txtToAdd = "stuff"; $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <textarea id="txt" rows="15" cols="70">There is some text here.</textarea> <input type="button" id="btn" value="OK" /> 

La réponse approuvée de George Claghorn a bien fonctionné pour simplement insérer du texte à la position du curseur. Si l'utilisateur avait sélectionné du texte, et que vous souhaitez que ce texte soit remplacé (l'expérience par défaut avec la plupart des textes), vous devez effectuer un petit changement lors du réglage de la variable "arrière".

En outre, si vous n'avez pas besoin de prendre en charge les anciennes versions d'IE, les versions modernes supportent textarea.selectionStart, afin que vous puissiez supprimer toute la détection du navigateur et un code spécifique à IE.

Voici une version simplifiée qui fonctionne pour Chrome et IE11 au moins, et gère le remplacement du texte sélectionné.

 function insertAtCaret(areaId, text) { var txtarea = document.getElementById(areaId); var scrollPos = txtarea.scrollTop; var caretPos = txtarea.selectionStart; var front = (txtarea.value).substring(0, caretPos); var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length); txtarea.value = front + text + back; caretPos = caretPos + text.length; txtarea.selectionStart = caretPos; txtarea.selectionEnd = caretPos; txtarea.focus(); txtarea.scrollTop = scrollPos; } 

Le code ci-dessus ne fonctionnait pas pour moi dans IE. Voici un code basé sur Insérer du texte dans textarea avec jQuery

J'ai sorti le getElementById afin que je puisse faire référence à l'élément d'une manière différente.

 function insertAtCaret(element, text) { if (document.selection) { element.focus(); var sel = document.selection.createRange(); sel.text = text; element.focus(); } else if (element.selectionStart || element.selectionStart === 0) { var startPos = element.selectionStart; var endPos = element.selectionEnd; var scrollTop = element.scrollTop; element.value = element.value.substring(0, startPos) + text + element.value.substring(endPos, element.value.length); element.focus(); element.selectionStart = startPos + text.length; element.selectionEnd = startPos + text.length; element.scrollTop = scrollTop; } else { element.value += text; element.focus(); } } 

Comment insérer un texte dans la position actuelle du curseur d'un TextBox via JQuery et JavaScript

Processus

1. Trouvez la position actuelle du curseur
2. Obtenir le texte à copier
3. Définir le texte là-bas
4. Mettre à jour la position du curseur

Ici, j'ai 2 TextBoxes et un bouton. Je dois cliquer sur une certaine position sur une zone de texte, puis cliquer sur le bouton pour coller le texte de l'autre boîte de texte à la position de la zone de texte précédente.

Le principal problème ici est d'obtenir la position actuelle du curseur où nous collerons le texte.

 //Textbox on which to be pasted <input type="text" id="txtOnWhichToBePasted" /> //Textbox from where to be pasted <input type="text" id="txtFromWhichToBePasted" /> //Button on which click the text to be pasted <input type="button" id="btnInsert" value="Insert"/> <script type="text/javascript"> $(document).ready(function () { $('#btnInsert').bind('click', function () { var TextToBePasted = $('#txtFromWhichToBePasted').value; var ControlOnWhichToBePasted = $('#txtOnWhichToBePasted'); //Paste the Text PasteTag(ControlOnWhichToBePasted, TextToBePasted); }); }); //Function Pasting The Text function PasteTag(ControlOnWhichToBePasted,TextToBePasted) { //Get the position where to be paste var CaretPos = 0; // IE Support if (document.selection) { ControlOnWhichToBePasted.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -ctrl.value.length); CaretPos = Sel.text.length; } // Firefox support else if (ControlOnWhichToBePasted.selectionStart || ControlOnWhichToBePasted.selectionStart == '0') CaretPos = ControlOnWhichToBePasted.selectionStart; //paste the text var WholeString = ControlOnWhichToBePasted.value; var txt1 = WholeString.substring(0, CaretPos); var txt2 = WholeString.substring(CaretPos, WholeString.length); WholeString = txt1 + TextToBePasted + txt2; var CaretPos = txt1.length + TextToBePasted.length; ControlOnWhichToBePasted.value = WholeString; //update The cursor position setCaretPosition(ControlOnWhichToBePasted, CaretPos); } function setCaretPosition(ControlOnWhichToBePasted, pos) { if (ControlOnWhichToBePasted.setSelectionRange) { ControlOnWhichToBePasted.focus(); ControlOnWhichToBePasted.setSelectionRange(pos, pos); } else if (ControlOnWhichToBePasted.createTextRange) { var range = ControlOnWhichToBePasted.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } </script> 

Je pense que vous pouvez utiliser le JavaScript suivant pour suivre la zone de texte finalisée:

 <script> var holdFocus; function updateFocus(x) { holdFocus = x; } function appendTextToLastFocus(text) { holdFocus.value += text; } </script> 

Usage:

 <input type="textbox" onfocus="updateFocus(this)" /> <a href="#" onclick="appendTextToLastFocus('textToAppend')" /> 

Une solution précédente (accessoires à gclaghorn) utilise la zone de texte et calcule la position du curseur aussi, il est donc préférable pour ce que vous voulez. D'autre part, celui-ci serait plus léger, si c'est ce que vous recherchez.

La réponse acceptée ne m'a pas fonctionné sur Internet Explorer 9. Je l'ai vérifié et la détection du navigateur ne fonctionnait pas correctement, elle a détecté ff (firefox) lorsque j'étais sur Internet Explorer.

Je viens de faire ce changement:

 if ($.browser.msie) 

Au lieu de:

 if (br == "ie") { 

Le code résultant est celui-ci:

 function insertAtCaret(areaId,text) { var txtarea = document.getElementById(areaId); var scrollPos = txtarea.scrollTop; var strPos = 0; var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) ); if ($.browser.msie) { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); strPos = range.text.length; } else if (br == "ff") strPos = txtarea.selectionStart; var front = (txtarea.value).substring(0,strPos); var back = (txtarea.value).substring(strPos,txtarea.value.length); txtarea.value=front+text+back; strPos = strPos + text.length; if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); range.moveStart ('character', strPos); range.moveEnd ('character', 0); range.select(); } else if (br == "ff") { txtarea.selectionStart = strPos; txtarea.selectionEnd = strPos; txtarea.focus(); } txtarea.scrollTop = scrollPos; } 

Ce plugin jQuery vous offre une méthode de sélection / manipulation de carnet pré-faite.

L'ajout de texte à la position actuelle du curseur comporte deux étapes:

1. Ajout du texte à la position actuelle du curseur
2. Mise à jour de la position actuelle du curseur

Démo: https://codepen.io/anon/pen/qZXmgN

Testé sur Chrome 48, Firefox 45, IE 11 et Edge 25

JS:

 function addTextAtCaret(textAreaId, text) { var textArea = document.getElementById(textAreaId); var cursorPosition = textArea.selectionStart; addTextAtCursorPosition(textArea, cursorPosition, text); updateCursorPosition(cursorPosition, text, textArea); } function addTextAtCursorPosition(textArea, cursorPosition, text) { var front = (textArea.value).substring(0, cursorPosition); var back = (textArea.value).substring(cursorPosition, textArea.value.length); textArea.value = front + text + back; } function updateCursorPosition(cursorPosition, text, textArea) { cursorPosition = cursorPosition + text.length; textArea.selectionStart = cursorPosition; textArea.selectionEnd = cursorPosition; textArea.focus(); } 

HTML:

 <div> <button type="button" onclick="addTextAtCaret('textArea','Apple')">Insert Apple!</button> <button type="button" onclick="addTextAtCaret('textArea','Mango')">Insert Mango!</button> <button type="button" onclick="addTextAtCaret('textArea','Orange')">Insert Orange!</button> </div> <textarea id="textArea" rows="20" cols="50"></textarea> 

En utilisant @quick_sliv answer:

 function insertAtCaret(el, text) { var caretPos = el.selectionStart; var textAreaTxt = el.value; el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos); }; 

Vous ne pouvez concentrer que la zone de texte requise et insérez le texte là-bas. Il n'y a aucun moyen de savoir où Focus est AFAIK (peut-être interconnecté sur tous les noeuds DOM?).

Vérifiez ce stackoverflow – il a une solution pour vous: Comment puis-je savoir quel élément DOM a la mise au point?

Contenu éditable, HTML ou tout autre élément DOM Sélections

Si vous essayez d'insérer au caret sur un <div contenteditable="true"> , cela devient beaucoup plus difficile, surtout s'il y a des enfants dans le conteneur éditable.

J'ai eu beaucoup de chance en utilisant la bibliothèque Rangy :

• GIT: https://github.com/timdown/rangy
• NPM: https://www.npmjs.com/package/rangy

Il a une tonne de fonctionnalités exceptionnelles telles que:

• Enregistrer la position ou la sélection
• Ensuite, restaurez la position ou la sélection
• Obtenir la sélection HTML ou texte en clair
• Parmi beaucoup d'autres

La démo en ligne ne fonctionnait pas la dernière fois que j'ai vérifié, mais le repo a des démos en cours d'exécution. Pour commencer, téléchargez simplement le Repo de Git ou NPM, puis ouvrez ./rangy/demos/index.html

Cela permet de travailler avec la posée du caret et la sélection du texte une brise!