“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

preface

Hello, I’m XY 👨🏻💻. Today we’re going to talk about CSS user-modify property 🆚 HTML contenteditable. Why the sudden desire to talk about these two properties? It was also because a fan was developing a forum-type website in the process of learning the front end, and wanted to realize similar to gold Digger # Add topic in the topic comment place, the effect is as follows:

Preliminary selection

  • Use the input field with JS implementation
  • CSS user-modifyattribute
  • HTML contenteditableattribute

⭐️ How did the nuggets come about ⭐️

As a front-end engineer, your first instinct would be to open the console and look at the source code:

You can see that the contenteditable= ‘true’ attribute 🧐 has been added to the element div

What can Contenteditable do?? Don’t worry, take a look at 🧐 step by step

Let’s look at three ways to compare 💡 :

  1. The first method has relatively high implementation complexity and poor scalability, so it is not recommended to consider directly.
  2. The second method is CSSuser-modifyAttributes can make HTML tags editable, dynamically insert topic tags, add custom styles to topic tags;
  3. The third way is HTMLcontenteditableProperty, the implementation is basically similar to the second

Since the first scheme is not considered, let’s go to the second and third scheme how to achieve the above effects

CSS user-modifyattribute

The user-modify attribute controls whether a user can edit the text on a page.

  • -webkit-user-modify:
    • read-only(Content read only)
    • read-write(Read-write content, rich text support)
    • read-write-plaintext-only(The content is readable and writable, but rich text formats (such as text color, size, image, etc.) in the pasted content are lost; Content is similar to plain text.

Code examples:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Public number: front-end development enthusiast</title>
  </head>
  <style>
    .cssContent {
      width: 500px;
      min-height: 100px;
      height: auto;
      border: 1px solid #1e80ff;
      -webkit-user-modify: read-write;
      outline: none;
      caret-color: #1e80ff;
      text-indent: 20px;
    }
    .topic_theme{
      color: #1e80ff;
    }
  </style>
  <body>
    <div class="cssContent">
      <p class="topic_theme"># Public account: Front-end development enthusiast #</p>
    </div>
  </body>
</html>
Copy the code

Effect display:

Compatibility:

Overall compatibility is good on Chrome Edge, Firefox currently supports some. Note, however, that the value read-write-plaintext-only is largely deprecated. Therefore, ⭐️ is advised to use ⭐️ carefully

HTML contenteditableattribute

The contenteditable property specifies whether the content of an element is editable. If an element has no contenteditable property set, it inherits the property from its parent.

  • contenteditable
    • trueSpecifies that elements are editable
    • falseSpecifies that the element is not editable

Code examples:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Public number: front-end development enthusiast</title>
  </head>
  <style>
    .cssContent {
      width: 500px;
      min-height: 100px;
      height: auto;
      border: 1px solid #1e80ff;
      outline: none;
      caret-color: #1e80ff;
      text-indent: 20px;
    }
    .topic_theme{
      color: #1e80ff;
    }
  </style>
  <body>
    <div class="cssContent" contenteditable='true'>
      <p class="topic_theme"># Public account: Front-end development enthusiast #</p>
    </div>
  </body>
</html>
Copy the code

Effect display:

Compatibility:

Overall compatibility is excellent in most major browsers including IE. Therefore, ⭐️ is recommended to use ⭐️

Adds event listeners to editable elements

Now that user-modify Contenteditable can make elements editable like input, does it have input listening events?

Give it a try: add the id cssContent to the editable element div

<div id='cssContent' class="cssContent"  >
    <p class="topic_theme"># Public account: Front-end development enthusiast #</p>
</div>

Copy the code

Try to bind keyboard events:

var divFa = document.getElementById('cssContent')
    divFa.addEventListener('keyup'.(e) = >{
      console.log('Keyboard Keyup event',e.target.outerText)
    })
Copy the code

Nice 👍 👍 👍

Write in the last

Public number: front-end development enthusiasts focus on sharing web front-end related technical articles, video tutorial resources, hot information, etc., if you like my share, to 🐟🐟 point a like 👍 or ➕ attention is my biggest support.