max-length

介绍

contenteditable可编辑容器的内容长度限制。一般利用contenteditable实现的可以输入区域，很难做到限制其输入的长度。这个库处理了英文输入、输入法输入、复制粘贴等情况，限制其内容的长度。

maxlength API

需要传入一个options配置项

maxlength(options)

maxlength({
  dom: '', // 必填属性，原生dom
  maxLength: 0, // 必填属性，如果没填，限制不生效
})

安装和使用

CDN

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maxlength@latest/dist/index.min.js"></script>

<script>
  const editor = document.getElementById('editor')

  maxLength({
    dom: editor,
    maxLength: 10
  }
</script>

NPM

安装maxlength

npm i maxlength --save

使用

引入包，使用包

import maxLength from 'maxlength'
// 获取设置了contenteditable属性的dom
const editor = document.getElementById('editor')

maxLength({
  dom: editor,
  maxLength: 10
}

html结构

<div>
  <h1>max-length</h1>
  <hr />
  <p>contenteditable可编辑容器的内容最大长度限制</p>

  <div id="editor" contenteditable>
  </div>
</div>