In HTML, contenteditable is a global property that can roughly be understood as “enabling an element to be editable”, much like Textarea, but with many drawbacks, such as the lack of the change hook, which is not discussed in this article ❌

appetizer

To make a div editable:

<div contenteditable> Click me to edit </div>Copy the code

textarea
textarea

The body of the

If… How about adding this attribute to the style element 😍, so that you can write styles directly on the page and come with “hot updates”? Hence the following code:

<head>
  <style contenteditable>
    html {
      background-color: #f1f1f1;
    }
  </style>
</head>
Copy the code

Then I excitedly cut to the page to see the effect, and found that it was empty:

After some research, to edit the style element on a page, two things must be done:

  • styleThe element must be placedbodyElements within the
  • styleElement to setdisplay: block;

So the code looks like this:

<body>
  <style contenteditable style="display: block;">
    html {
      background-color: #fff;
    }
  </style>
</body>
Copy the code

Here’s what happens:

disadvantages

The obvious drawback, which I deliberately avoided, was that the code could not be wrapped because a return would add a new div element to the content, breaking the original text structure:

To solve

After searching the information online, a CSS attribute, user-modify, is found. The value can be the following four:

  • read-only
  • read-write
  • write-only
  • read-write-plaintext-only

CSS User-modify property behavior test instance page

We’ll just take the fourth value and define that the element can be edited and only plain text can be entered, so the carriage return will not produce div👌.

<style class="textarea" style="display: block; -webkit-user-modify: read-write-plaintext-only;">
  html {
    background-color: #fff;
  }
</style>
Copy the code

Here’s what happens:

Disadvantages of the Tab key will jump focal! So should need to use script to deal with, specific online surfing a lot of ha 💦

conclusion

McDonald’s has a nice gold bucket at home

Phase to recommend

CSS stealth wave effect 🌊, this is probably the simplest way to implement it, right? ️

CSS manipulation you may not know about – form validation 🤦️

HTML directive implementation tooltip text prompt, pure CSS implementation (no scripting) ️

The last

If you think this article is good, please don’t forget to like and follow 😊