元素的可編輯狀態

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 不支持上傳文件,所以就復制過來了。作者信息什么的都沒刪。對前端基本屬于一竅不通,所以沒有任何修改,反正用著沒問題就...
    全棧在路上閱讀 1,995評論 0 2
  • 事件源對象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
    孤魂草閱讀 904評論 0 0
  • 本章內容 理解表單 文本框驗證與交互 使用其他表單控制 14.1 表單的基礎知識 通過document.forms...
    悶油瓶小張閱讀 367評論 0 0
  • 1.今天好累哦,早起去上班中午做倆小時車去很遠的地方培訓,培訓的跟屎一樣,這幫人好無聊呀,做事好沒效率,好煩他們,...
    超級蒙蒙蒙閱讀 195評論 0 0
  • 討生活不易,全當是修行。 在這個世界上,孤獨應該是常態,那種深入骨髓的的。 大部分時間,我都在問自己,接下來去哪里...
    _美楠子啊閱讀 271評論 0 1