Enter a piece of text in an editable div
Analysis under Google Chrome
Analysis under Firefox
As can be seen from the above figure, the div tag is used for line wrapping under Google browser, and the br tag is used for line wrapping under Firefox browser.
When we enter a piece of text and delete it, see what effect it will have
Google Chrome
Firefox browser
The appearance on the page will have the same effect as no input text, but we will see that the dom structure has changed, so we should pay attention to the method of removing all child elements (empty()) when emptying the content of the div, Do not use to remove the specified tags (because the resolution is different under each browser), this is what I have concluded in the project
Why not use $(".div-content").children().remove(); instead of $(".div-content").empty();
Because in Google Chrome's parsing, the first line is not wrapped by a tag, so using remove() does not remove the plain text
Another problem is that the editable div on the Firefox browser collapses when the height is not set, and the focus positioning is not accurate. Pay attention when the Google browser does not encounter it.