给div可输入限制字数

你可以通过JavaScript来限制`div`可输入的字数。具体实现方法如下：

<div contenteditable="true" oninput="limitText(this, 50)"></div>

上述代码中，`contenteditable`属性表示该`div`可编辑，`oninput`事件表示当该`div`中的内容发生变化时，调用`limitText()`函数来限制输入的字数。其中`this`表示当前`div`元素，`50`表示最大输入字数。

接下来，我们来实现`limitText()`函数：

function limitText(element, maxLength) {
  let text = element.innerText;
  if (text.length > maxLength) {
    element.innerText = text.substring(0, maxLength);
    alert("输入字数超过限制！");
  }
}

上述代码中，`limitText()`函数接收两个参数：`element`表示当前`div`元素，`maxLength`表示最大输入字数。函数内部首先获取`div`中的文本内容，判断长度是否超过限制，如果超过限制，则截取前`maxLength`个字符，并弹出提示信息。

你可以根据需要修改`maxLength`的值来改变最大输入字数。

相关问题

div contenteditable 限制输入字数_3/90天训练：输入字数超限问题

你可以通过 JavaScript 监听输入框的输入事件，然后获取输入框中的文本内容，再通过字符串的 `length` 属性获取当前输入的字符数，以此判断是否超出限制。如果超出限制，可以通过 `substring()` 方法截取字符串并更新输入框的内容，或者给出提示信息。以下是一个简单的示例代码：

<div contenteditable="true" id="input-box"></div>
<div id="counter"></div>

<script>
  const maxLength = 10; // 最大字符数

  const inputBox = document.getElementById('input-box');
  const counter = document.getElementById('counter');

  inputBox.addEventListener('input', function() {
    const text = inputBox.innerText;
    const length = text.length;
    if (length > maxLength) {
      inputBox.innerText = text.substring(0, maxLength);
      counter.innerText = `已输入 ${maxLength} / ${maxLength} 个字符`;
    } else {
      counter.innerText = `已输入 ${length} / ${maxLength} 个字符`;
    }
  });
</script>

在上面的示例中，我们首先定义了一个 `maxLength` 变量表示最大字符数，然后通过 `document.getElementById()` 方法获取输入框和计数器的元素对象。接着，我们给输入框添加了一个 `input` 事件监听器，每次输入框的内容发生变化时，就会触发该事件。在事件处理函数中，我们首先获取输入框中的文本内容，然后计算字符数并进行判断。如果超出了最大字符数，就使用 `substring()` 方法截取字符串并更新输入框的内容，同时显示计数器的文本为已输入的字符数与最大字符数。否则，就只显示已输入的字符数与最大字符数。

这只是一个简单的实现方式，你可以根据实际需求进行修改和优化。

tinymce限制最大输入字数，并显示剩余可输入字数

你可以使用 tinymce 的插件 Word Count 来限制最大输入字数并显示剩余可输入字数。这个插件会自动计算输入的字符数，并在编辑器底部显示出来。

首先，在页面中引入 Word Count 插件的 js 文件和 css 文件：

<script src="https://cdn.tiny.cloud/1/YOUR_API_KEY/tinymce/5/plugins/wordcount/plugin.min.js"></script>
<link href="https://cdn.tiny.cloud/1/YOUR_API_KEY/tinymce/5/plugins/wordcount/plugin.min.css" rel="stylesheet">

然后，在初始化 tinymce 编辑器时，将 wordcount 插件添加到 plugins 参数中，并在 toolbar 参数中添加 wordcount 字段，这样就会在编辑器底部显示字数统计：

tinymce.init({
  selector: '#myTextarea',
  plugins: 'wordcount', //添加 wordcount 插件
  toolbar: 'wordcount', //在工具栏中添加 wordcount 字段
  max_chars: 100, //设置最大字符数为 100
  setup: function (editor) {
    //添加 change 事件监听器
    editor.on('change', function () {
      var content = editor.getContent({ format: 'text' }); //获取编辑器内容
      var chars_left = editor.getParam('max_chars') - content.length; //计算剩余字符数
      var statusbar = editor.theme.panel.find('#charcount'); //找到状态栏
      statusbar.text(chars_left + ' characters left'); //更新状态栏
    });
  }
});

在上面的代码中，我们添加了一个 change 事件监听器，在编辑器内容改变时更新状态栏。在监听器中，我们首先获取编辑器的内容，然后计算剩余字符数，最后更新状态栏的文本。

注意，上面的代码中使用了 editor.getParam('max_chars') 获取最大字符数，这个值是在初始化编辑器时设置的。你可以根据自己的需要设置不同的最大字符数。

最后，你需要在编辑器下方添加一个元素来显示状态栏：

<div id="myStatusbar">0 characters left</div>

然后，在初始化 tinymce 编辑器时，将这个元素的 id 添加到 statusbar 参数中：

tinymce.init({
  selector: '#myTextarea',
  plugins: 'wordcount',
  toolbar: 'wordcount',
  max_chars: 100,
  statusbar: '#myStatusbar' //添加状态栏元素的 id
});