Properties and usage of contenteditable in html5

This article mainly explains "the properties and usage of contenteditable in html5". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the properties and usage of contenteditable in html5".

How to use contenteditable

Method 1:

one

Method 2: based on css

1user-modify:read-write-plaintext-only

2-webkit-user-modify:read-write-plaintext-only

If we are in a non-webkit kernel, we need to consider using js to implement it. The first thing that comes to mind is:

1vard=document.getElementById ("content")

2document.addEventListener ("keydown", function () {

3D [XSS _ clean] = d [XSS _ clean] .replace (/] * > / g, "")

4})

It is found that the effect is roughly the same as above, although it can filter the style, but there are many problems, such as the cursor is always in the first position, the input box can not insert facial expressions, newline failure and so on. Check the Internet to find out how others do it and find that you can filter the style by modifying the copy event:

Contenteditable code

1functionpasteFilter (e) {

2e.preventDefault ()

3vartext=null

4max / get the text in the clipboard

5if (window.clipboardData&&clipboardData.setData) {

6//IE

7text=window.clipboardData.getData ('text')

8} else {

9try {

10text= (e.originalEvent | | e) .clipboardData.getData ('text/plain')

11} catch (e) {

12return

13}

14}

Thank you for your reading, the above is the content of "the properties and usage of contenteditable in html5". After the study of this article, I believe you have a deeper understanding of the properties and usage of contenteditable in html5. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!