《VUE》可编辑div限制字数

10 篇文章 0 订阅

<template>
  <div class="home">
    <div
      id="sendMsg"
      contenteditable="true"
      class="textarea"
      @input="input"
      @compositionstart="compositStart"
      @compositionend="compositEnd"
      @paste="copyText"
      v-html="content"
    ></div>
    <div class="limit">{{ textSize }}/100</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        textSize: 0,
        lock: true,
        fullContent: '',
        content: '',   // 文本数据
      }
    },
    methods: {
      // 输入中文开始时
      compositStart(e) {
        this.lock = false;
        document.querySelector("#sendMsg").focus();
        document.execCommand("selectAll", false, null);
        document.getSelection().collapseToEnd();
      },
      // 输入中文结束时
      compositEnd(e) {
        this.lock = true;
        this.input(e);
      },
      input(e) {
        if(this.lock) {
          this.textSize = e.target.innerHTML.length
          if(this.textSize >= 100) {
            this.textSize = 100;
            this.fullContent = e.target.innerHTML.substring(0, 100);
            e.target.innerHTML = e.target.innerHTML.substring(0, 100);
          } else {
            this.fullContent = ''
          }
          this.content = e.target.innerHTML;
          this.textFocus();
        } else if (this.fullContent) {
          // 目标对象:超过100字时候的中文输入法
          // 原由:虽然不会输入成功,但是输入过程中字母依然会显现在输入框内
          // 弊端:谷歌浏览器输入法的界面偶尔会闪现
          e.target.innerHTML = this.fullContent;
          this.lock = true;
          this.textFocus();
        }
      },
      // 粘贴富文本转为纯文本
      copyText(e) {
        e.stopPropagation();
        e.preventDefault();
        let text = '', event = (e.originalEvent || e);
        if (event.clipboardData && event.clipboardData.getData) {
          text = event.clipboardData.getData('text/plain');
        } else if (window.clipboardData && window.clipboardData.getData) {
          text = window.clipboardData.getData('Text');
        }
        if (document.queryCommandSupported('insertText')) {
          document.execCommand('insertText', false, text);
        } else {
          document.execCommand('paste', false, text);
        }
      },
      // 文本输入框聚焦,焦点在最后位置
      textFocus() {
        setTimeout(() => {
          document.querySelector("#sendMsg").focus();
          document.execCommand("selectAll", false, null);
          document.getSelection().collapseToEnd();
        }, 0);
      },
    }
  }
</script>

<style scoped>
  .home{
    width: fit-content;
    position: relative;
  }
  .textarea{
    width: 600px;
    height: 300px;
    caret-color: auto;
    outline-style: none;
    border: 1px solid #D9D9D9;
    background-color: #F6F8FA;
    padding: 0 10px 20px;
    line-height: 26px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .limit{
    position: absolute;
    bottom: 1px;
    right: 1px;
    background-color: #fff;
    padding: 0 8px;
    line-height: 20px;
  }
</style>

tips:

开源项目地址:https://gitee.com/chenswei/editable-div

技术参考:https://blog.csdn.net/melodystars/article/details/103960259

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3富文本编辑器的字数限制可以通过监听正文内容变化来实现。在Vue组件中,可以使用data属性来定义一个字数统计的变量,比如fontCount。然后使用watch属性来监听content的变化,并在其变化时更新字数统计。具体的代码可以参考引用中的示例。其中,通过遍历新内容newVal的每个字符,判断是否在标签中或特殊字符中,来判断是否是有效的字数。如果是有效的字数,则将fontCount加1。最后,fontCount的值就是编辑器中输入的有效字数的统计结果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue3使用vueup/vue-quill富文本、并限制输入字数](https://blog.csdn.net/m0_55969466/article/details/129499497)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue项目富文本编辑器输入格式化以计算总字数](https://blog.csdn.net/LIMITSSS/article/details/124790971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值