Javascript Girl
  1. Javascript Girl
  3. Insertion du texte dans un IFRAME modifiable à la position du caret (IE)
Intereting Posts
JQuery post () avec sérigraphie et données supplémentaires Enregistrez le texte formaté dans la base de données et récupérez-le 'tel quel' comme une chaîne formatée Assurer un élément est concentré Comment créer un diaporama simple avec javascript? Afficher Pdf dans le navigateur en utilisant express js Comment sélectionner une valeur dans le menu déroulant javascript? Moment.js: modifiez le comportement par défaut humanise () Comment puis-je revenir à la coordonnée d'un chemin dans d3.js? Différences entre 0, -0 et +0 Comment les liens fonctionnent-ils dans SoundCloud? Mouseover () mouseout () jQuery add / removeClass problème D3 – sunburst – transition donnée aux données mises à jour – essayer d'animer, pas snap Highcharts – multiple yAxis avec sa propre info-bulle Différences entre node.js et Tornado Faites une boucle et recherchez dans TOUS les articles dans localStorage

Insertion du texte dans un IFRAME modifiable à la position du caret (IE)

Je suis en difficulté avec un problème réellement difficile: dans Internet Explorer, je souhaite insérer du texte brut à la position actuelle du caret. Cela fonctionne très bien pour les simples éléments TEXTAREA, mais cela ne fonctionne pas entièrement pour les IFRAME éditables, ce qui est ce que j'ai.

Dans le script que j'utilise, je crée un objet TextRange à partir du document de l'IFRAME que j'utilise pour coller le texte en HTML à la position du curseur. 

<iframe id="editable"> <html> <body> Some really boring text. </body> </html> </iframe> <script type="text/javascript"> window.onload = function() { var iframe = document.getElementById('editable'); var doc = iframe.contentDocument || iframe.contentWindow.document; doc.body.innerHTML = iframe.textContent || iframe.innerHTML; // Make IFRAME editable if (doc.body.contentEditable) { doc.body.contentEditable = true; } } function insert(text) { var iframe = document.getElementById('editable'); var doc = iframe.contentDocument || iframe.contentWindow.document; iframe.focus(); if(typeof doc.selection != 'undefined') { var range = doc.selection.createRange(); range.pasteHTML(text); } } </script> <input type="button" value="Insert" onClick="insert('foo');"/>

Lorsque je sélectionne un texte dans IFRAME, la sélection sera remplacée par "foo" – c'est un comportement attendu. Mais lorsque je place le carnet quelque part dans le texte, l'insertion ne fonctionnera pas.

Est-ce ce comportement commun, car il n'y a pas de «sélection réelle» pour le cas où je place le curseur quelque part ou est-ce un bug avec des IFRAME éditables dans IE, car cela fonctionne très bien avec des éléments TEXTAREA simples?

Y at-il un travail autour?

Vous pouvez trouver que cela fonctionne si vous utilisez onmousedown plutôt que sur votre bouton.

METTRE À JOUR

La raison pour laquelle cela fait une différence est que l'événement de click déclenche après que l'iframe a perdu le focus (ce qui détruit une sélection effondrée dans IE) alors que mousedown déclenché auparavant.

MISE À JOUR SUPPLÉMENTAIRE

Vous pouvez également essayer de corriger cela dans IE en sauvegardant / restaurer le TextRange sélectionné lorsque l'iframe perd ou reçoit la mise au point. Quelque chose comme ça devrait fonctionner: 

 function fixIframeCaret(iframe) { if (iframe.attachEvent) { var selectedRange = null; iframe.attachEvent("onbeforedeactivate", function() { var sel = iframe.contentWindow.document.selection; if (sel.type != "None") { selectedRange = sel.createRange(); } }); iframe.contentWindow.attachEvent("onfocus", function() { if (selectedRange) { selectedRange.select(); } }); } } window.onload = function() { var iframe = document.getElementById('editable'); fixIframeCaret(iframe); };