javascript - Insertar texto en un IFRAME editable en la posición de intercalación(IE)
internet-explorer textrange (1)
Puede encontrar que funciona si usa onmousedown lugar de hacer clic en el botón.
ACTUALIZAR
La razón por la que esto hace la diferencia es que el evento de click se dispara después de que el iframe pierde el foco (lo que destruye una selección contraída en IE) mientras que el mousedown dispara antes.
ACTUALIZACIÓN ADICIONAL
También puede intentar solucionar esto en IE guardando / restaurando el TextRange seleccionado a medida que el iframe pierde / recibe el foco. Algo como esto debería funcionar:
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);
};
Estoy luchando con un problema realmente directo: en Internet Explorer quiero insertar texto sin formato en la posición actual de intercalación. Esto funciona realmente bien para elementos simples de TEXTAREA pero no funciona del todo para IFRAME editables, que es lo que tengo.
En el script que uso, estoy creando un objeto TextRange a partir del documento del IFRAME que utilizo para pegar el texto como HTML en la posición del cursor.
<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'');"/>
Cuando selecciono texto en el IFRAME, la selección se reemplazará por "foo"; este es el comportamiento esperado. Pero cuando coloco el cursor en alguna parte del texto, la inserción no funcionará.
¿Es este comportamiento común, ya que no hay "ninguna selección real" para el caso de que coloque el cursor en alguna parte o es un error con IFRAMEs editables en IE, ya que funciona bastante bien con elementos simples de TEXTAREA?
¿Hay alguna solución?