[問題] chrome 與 contenteditable

看板Ajax作者no1kk (心中在下雨)時間12年前 (2013/05/23 15:24)推噓3(3推 0噓 0→)

留言3則, 3人參與討論串1/1

問題簡述: 在 html 的 tag 加上屬性 contenteditable="true" 可以讓內容被使用者編輯大部分的 inline editor plugin 也是利用此方式做到即時編輯的效果但是，最近在做的專案發現在 chrome 下點擊了可被編輯的區塊，看到有出現 focus 的外框變化但是卻沒有輸入文字的游標，而文字也無法被輸入，亦無法選取環境: chrome 25 我做的是封閉式後台介面，chrome 25 是指定的瀏覽器 & 版本過程: 經測試乾淨的頁面下沒有問題，使用正常在系統中使用 jsshell 執行以下程式，監測目前游標的位置 var tt = setInterval(function(){ var selection = window.getSelection(); var range = selection.getRangeAt(0); console.log(selection); console.log(range) },1000); $("body").keydown(function(){ clearInterval(tt); }); 一般情況下都抓到的 selection & range 但是當我點擊了可編輯的區域，立即變成以下狀態 selection.type = 'None' selection.baseNode = null range -> undefined 其他說明: 我只負責這個系統的 widget 部分系統中用到的 js 不是我的管轄範圍 (如果有需要也是能協調，只是負責的團隊不在台灣所以可能會比較麻煩一點) 真的很不好意思，因為是封閉系統所以也無法提供頁面給各位檢視不知能否提供可能的錯誤方向，或測試方向或是有其他人也遇過這類問題，有解決的方式感謝!! -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 61.219.35.100 自問自答... 後來發現因為某些原因，在基本的 css 添加了以下 body{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 造成無法選取的情況解決方式也很簡單，而且不干擾到原本的功能添加以下css #target{ -webkit-user-select: auto; -khtml-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } #target 是目標範圍以下要可以被選取當然要用 class 也行，因為優先權都比 tagname 高 ※ 編輯: no1kk 來自: 61.219.35.100 (05/24 12:05)