Javascript Girl
  1. Javascript Girl
  3. Insérer du texte au curseur dans un div
Intereting Posts
JavascriptError: javascript error: document déchargé en attendant le résultat Écriture d'abord 100 nombres premiers dans un fichier utilisant node.js Puis-je décider ce qui se passe sur un appel vers une méthode d'objet inexistante? Afficher un div uniquement sur la page d'accueil du blog tumblr? Android WebView: réponse au bouton très lâche Trois.js contours Injecter une étiquette de script avec ngBindHtml Select2 () n'est pas une fonction Backbone.js – Les deux cliquent et double cliquez sur l'événement sur un élément Changer la valeur Truthy / Falsey de l'objet Javascript Event.clipboardData.setData dans l'événement de copie Faire chatbot (wit.ai) répondre qu'il n'a pas de réponse appropriée Sauvegarde et récupération à partir de chrome.storage.sync JavaScript – Texte visible d'un DIV Le contexte d'invocation (ceci) de l'appel de fonction forEach

Insérer du texte au curseur dans un div

J'ai une div contentative où j'ai besoin d'insérer du texte à la position du caret,

Cela peut être facilement effectué dans IE par document.selection.createRange().text = "banana"

Existe-t-il une façon similaire de mettre en œuvre cela dans Firefox / Chrome?

(Je sais qu'une solution existe ici , mais elle ne peut pas être utilisée en div contentative et semble maladroite)

Je vous remercie!

La fonction suivante insère le texte à la position du caret et supprime la sélection existante. Il fonctionne dans tous les principaux navigateurs de bureau: 

 function insertTextAtCursor(text) { var sel, range, html; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); range.insertNode( document.createTextNode(text) ); } } else if (document.selection && document.selection.createRange) { document.selection.createRange().text = text; } }

METTRE À JOUR

Sur la base des commentaires, voici un code pour sauvegarder et restaurer la sélection. Avant d'afficher votre menu contextuel, vous devez stocker la valeur de retour de saveSelection dans une variable, puis passer cette variable dans restoreSelection pour restaurer la sélection après avoir caché le menu contextuel et avant d'insérer le texte. 

 function saveSelection() { if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { return sel.getRangeAt(0); } } else if (document.selection && document.selection.createRange) { return document.selection.createRange(); } return null; } function restoreSelection(range) { if (range) { if (window.getSelection) { sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (document.selection && range.select) { range.select(); } } }

Juste une méthode plus facile avec jquery:

Copier le contenu entier du div

var oldhtml=$('#elementID').html();

var tobejoined='<span>hii</span>';

//element with new html would be

$('#elementID').html(oldhtml+tobejoined);

simple!