使用 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/