Goo*_*bot 92 javascript html5 javascript-events execcommand
我有一个基本编辑器,基于execCommand这里介绍的示例.在该区execCommand域内粘贴文本有三种方法:
我想只允许粘贴纯文本,不带任何HTML标记.如何强制前两个操作粘贴纯文本？
可能的解决方案:我能想到的方法是在粘贴之前为(Ctrl+ V)设置用于keyup事件的监听器并剥离HTML标签.
pim*_*vdb 221
它将截取paste事件,取消paste,并手动插入剪贴板的文本表示:
http://jsfiddle.net/HBEzc/.这应该是最可靠的:
不过,我不确定是否支持跨浏览器.
editor.addEventListener("paste", function(e) {
// cancel paste
e.preventDefault();
// get text representation of clipboard
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
// insert text manually
document.execCommand("insertHTML", false, text);
});
Jam*_*ker 34
我无法在IE中获得接受的答案,所以我做了一些侦察,并得出了这个答案,适用于IE11和最新版本的Chrome和Firefox.
$('[contenteditable]').on('paste', function(e) {
e.preventDefault();
var text = '';
if (e.clipboardData || e.originalEvent.clipboardData) {
text = (e.originalEvent || e).clipboardData.getData('text/plain');
} else if (window.clipboardData) {
text = window.clipboardData.getData('Text');
}
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
document.execCommand('paste', false, text);
}
});
Adr*_*ves 20
作为pimvdb的密切解决方案.但它适用于FF,Chrome和IE 9:
editor.addEventListener("paste", function(e) {
e.preventDefault();
if (e.clipboardData) {
content = (e.originalEvent || e).clipboardData.getData('text/plain');
document.execCommand('insertText', false, content);
}
else if (window.clipboardData) {
content = window.clipboardData.getData('Text');
document.selection.createRange().pasteHTML(content);
}
});
web*_*mer 17
当然这个问题已经回答了,主题很老但我想提供我的解决方案,因为它简单干净:
这是我的contenteditable-div上的粘贴事件.
var text = '';
var that = $(this);
if (e.clipboardData)
text = e.clipboardData.getData('text/plain');
else if (window.clipboardData)
text = window.clipboardData.getData('Text');
else if (e.originalEvent.clipboardData)
text = $('<div></div>').text(e.originalEvent.clipboardData.getData('text'));
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertHTML', false, $(text).html());
return false;
}
else { // IE > 7
that.find('*').each(function () {
$(this).addClass('within');
});
setTimeout(function () {
// nochmal alle durchlaufen
that.find('*').each(function () {
// wenn das element keine klasse 'within' hat, dann unwrap
// http://api.jquery.com/unwrap/
$(this).not('.within').contents().unwrap();
});
}, 1);
}
其他部分来自另一个我找不到的SO帖子......
更新19.11.2014: 另一个SO帖子
发布的答案似乎都没有真正跨浏览器工作，或者解决方案过于复杂：
insertTextIE 不支持该命令paste在 IE11 中使用该命令导致堆栈溢出错误对我有用的（IE11、Edge、Chrome 和 FF）如下：
$("div[contenteditable=true]").off('paste').on('paste', function(e) {
e.preventDefault();
var text = e.originalEvent.clipboardData ? e.originalEvent.clipboardData.getData('text/plain') : window.clipboardData.getData('Text');
_insertText(text);
});
function _insertText(text) {
// use insertText command if supported
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
}
// or insert the text content at the caret's current position
// replacing eventually selected content
else {
var range = document.getSelection().getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<textarea name="t1"></textarea>
<div style="border: 1px solid;" contenteditable="true">Edit me!</div>
<input />
</body>请注意，自定义粘贴处理程序仅需要/为contenteditable节点工作。由于字段textarea和普通input字段根本不支持粘贴 HTML 内容，因此此处无需执行任何操作。
| 归档时间： |
|
| 查看次数： |
80069 次 |
| 最近记录： |