使用 contenteditable 为元素添加该属性
css属性控制读写状态 user-modify but只能在webkit内核下使用
contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"
兼容代码
$('[contenteditable]').each(function() {// 干掉IE http之类地址自动加链接try { document.execCommand("AutoUrlDetect", false, false); } catch (e) {} $(this).on('paste', function(e) { e.preventDefault(); var text = null; if(window.clipboardData && clipboardData.setData) {// IEtext = window.clipboardData.getData('text'); } else { text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本'); } if (document.body.createTextRange) { if (document.selection) { textRange = document.selection.createRange(); } else if (window.getSelection) { sel = window.getSelection(); var range = sel.getRangeAt(0);// 创建临时元素,使得TextRange可以移动到正确的位置var tempEl = document.createElement("span"); tempEl.innerHTML = "&#FEFF;"; range.deleteContents(); range.insertNode(tempEl); textRange = document.body.createTextRange(); textRange.moveToElementText(tempEl); tempEl.parentNode.removeChild(tempEl); } textRange.text = text; textRange.collapse(false); textRange.select(); } else {// Chrome之类浏览器document.execCommand("insertText", false, text); } });});
整理自
http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/