可编辑div contenteditable = “true“限制字数输入框

最新推荐文章于 2024-08-18 16:02:22 发布

熙冰

最新推荐文章于 2024-08-18 16:02:22 发布

阅读量8.1k

点赞数 6

分类专栏： Js 文章标签： contenteditable

本文链接：https://blog.csdn.net/melodystars/article/details/103960259

版权

本文介绍了如何利用HTML5的contenteditable属性创建一个可编辑的div，并实现字数限制功能，确保用户输入不超过预设的最大字数。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style>
    .main {
      position: relative;
      width: 300px;
    }

    .main-content {
      background: none;
      outline: none;
      padding: 10px 10px 30px;
      border: 1px solid #CDCDCD;
      border-radius: 4px;
      word-wrap: break-word;
      word-break: break-all;
      -webkit-user-modify: read-write-plaintext-only;
    }

    .main-content:empty::before {
      content: attr(placeholder);
      color: #CDCDCD;
    }

    .main-num {
      position: absolute;
      bottom: 10px;
      right: 15px;
      color: #CDCDCD;
      line-height: 16px;
      text-align: right;
    }
  </style>
</head>
<body>
<div>
  <div class="main">
    <div class="main-content" contenteditable="true" placeholder='请输入内容' id="conten