javascript - teclado - Eliminar formato de un div divisor de contenido
quitar formato de texto copiado de internet (8)
¿Has intentado usar innerText?
ADICIONAL:
Si desea eliminar el marcado del contenido pegado en la división editable, intente el truco anterior de crear una división temporal; consulte el ejemplo a continuación.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Strip editable div markup</title>
<script type="text/javascript">
function strip(html) {
var tempDiv = document.createElement("DIV");
tempDiv.innerHTML = html;
return tempDiv.innerText;
}
</script>
</head>
<body>
<div id="editableDiv" contentEditable="true"></div>
<input type="button" value="press" onclick="alert(strip(document.getElementById(''editableDiv'').innerText));" />
</body>
</html>
Tengo una División de contenido editable y quiero eliminar cualquier formato, especialmente para copiar y pegar texto.
Buscaba respuestas a esto por edades y terminé escribiendo mi propia.
Espero que esto ayude a otros. En el momento de escribir esto, parece funcionar en ie9, chrome y firefox.
<div contenteditable="true" onpaste="OnPaste_StripFormatting(this, event);" />
<script type="text/javascript">
var _onPaste_StripFormatting_IEPaste = false;
function OnPaste_StripFormatting(elem, e) {
if (e.originalEvent && e.originalEvent.clipboardData && e.originalEvent.clipboardData.getData) {
e.preventDefault();
var text = e.originalEvent.clipboardData.getData(''text/plain'');
window.document.execCommand(''insertText'', false, text);
}
else if (e.clipboardData && e.clipboardData.getData) {
e.preventDefault();
var text = e.clipboardData.getData(''text/plain'');
window.document.execCommand(''insertText'', false, text);
}
else if (window.clipboardData && window.clipboardData.getData) {
// Stop
if (!_onPaste_StripFormatting_IEPaste) {
_onPaste_StripFormatting_IEPaste = true;
e.preventDefault();
window.document.execCommand(''ms-pasteTextOnly'', false);
}
_onPaste_StripFormatting_IEPaste = false;
}
}
</script>
Con Jquery puede usar el método .text() , por lo tanto, cuando desenfoque, por ejemplo, puede reemplazar el contenido con el contenido del texto.
$("#element").blur(function(e) {
$(this).html($(this).text());
});
Me gustaría agregar mi solución a este problema:
ContentEditableElement.addEventListener(''input'', function(ev) {
if(ev.target.innerHTML != ev.target.textContent) {
// determine position of the text caret
var caretPos = 0,
sel, range;
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
var children = ev.target.childNodes;
var keepLooping = true;
for(let i = 0; keepLooping; i++) {
if(children[i] == range.commonAncestorContainer || children[i] == range.commonAncestorContainer.parentNode) {
caretPos += range.endOffset;
keepLooping = false;
} else {
caretPos += children[i].textContent.length;
}
}
// set the element''s innerHTML to its textContent
ev.target.innerHTML = ev.target.textContent;
// put the caret where it was before
range = document.createRange();
range.setStart(ev.target.childNodes[0], caretPos);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
});
(Esto no es compatible con versiones anteriores de IE)
No puedes acceder al portapapeles del sistema, así que necesitarás un hack. Vea esta pregunta: JavaScript obtiene datos del portapapeles en el evento de pegado (navegador cruzado)
Sé que ha pasado un tiempo, pero tuve el mismo problema. En mi caso, es una aplicación GWT para hacerlo aún peor. De todos modos, resolvió el problema con:
var clearText = event.clipboardData.getData(''text/plain'');
document.execCommand(''inserttext'', false, clearText);
Consulte: https://jsfiddle.net/erikwoods/Ee3yC/
Prefiero el comando "inserttext" en lugar de "insertHTML", porque la documentación dice que es exactamente para insertar texto sin formato, por lo que parece más adecuado. Consulte https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
<p spellcheck="false" contentEditable onkeydown="return false">text</p>
document.querySelector(''div[contenteditable="true"]'').addEventListener("paste", function(e) {
e.preventDefault();
var text = e.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
});
Es simple: agregue un escucha al evento "pegar" y reeforme el contenido del portapapeles.
Aquí otro ejemplo para todos los contenedores en el cuerpo:
[].forEach.call(document.querySelectorAll(''div[contenteditable="true"]''), function (el) {
el.addEventListener(''paste'', function(e) {
e.preventDefault();
var text = e.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
}, false);
});
Saludos