div contenteditable="true"各個瀏覽器上的解析

可編輯狀態下的div輸入一段文字

谷歌瀏覽器下的解析

火狐瀏覽器下的解析

由上圖可知，谷歌瀏覽器下換行用的是div標籤，火狐瀏覽器下換行用的是br標籤

當咱們輸入一段文字以後再刪除掉，看看會有什麼效果

谷歌瀏覽器

火狐瀏覽器

 

頁面上看上出會與沒有輸入文字一個效果，但咱們會看到dom結構已經發生了變化，因此咱們要注意當清空div的內容時要用移除全部子元素的方法(empty())，不要去用移除指定的標籤(由於在各個瀏覽器下解析的不同)，這也是我在作項目中總結出來的

爲何不用$(".div-content").children().remove();而用$(".div-content").empty();

由於在谷歌瀏覽器的解析中，第一行並無被標籤包裹着，因此使用remove()並不能移除純文本

還有一個問題就是在火狐瀏覽器上可編輯的div沒有設置高度時是塌陷的，焦點定位也不許確等問題，在谷歌瀏覽器沒有遇到使用的時候注意下