ReactQuill字数限制方案

最近项目中有用到react-quill富文本，有一个需求是限制2000，但是react-quill本身并没有字数限制，所以我找到了一些解决方案

1. 使用deleteText

quill.on('text-change', function(delta, old, source) {if (quill.getLength() > limit) {quill.deleteText(limit, quill.getLength());}
});

在富文本的onChange事件里通过getLength()获取富文本字数，然后通过deleteText删除多出来的文字。
不过这种方法不是很好，会造成页面的卡顿

2. 监听键盘按下的事件onKeyDown

<ReactQuillonKeyDown={this.checkCharacterCount}onChange={(value) => this.props.onChange(value)}
/>checkCharacterCount = (event) => {if (this.getCharacterText().length > this.props.maxCharacters && event.key !== 'Backspace') {event.preventDefault();}
}

监听键盘按下的事件，在监听事件中判断富文本字数是否超出限制的字数，如果超出且键盘按下的不是删除键，就禁止它的默认事件

ReactQuill字数限制方案相关推荐

前端中文输入法对剩余字数计算的影响
背景前端开发中往往有如下需求限制前端文本框(textfield,input,textarea,div)等的输入字数,可以参考新浪微博.但是这里有个问题,当我们使用中文输入法的时候,我们输入zhesh ...
Android字数限制的EditText实现方案研究
在应用开发中,有时需要实现有字数限制的EditText,首先来分析下市面上存在的类似实现方案吧,好有个感性的认识. [方案一:腾讯微博] 每个中文字符算一个字数,每两个英文字符算一个字数,当用户输入内 ...
写方案字数越多越好写
自从转做咨询这个行业以来,经常要写的就是方案.常常面对不同的客户,写着各式各样的方案.有的时候,一周有几个方案要写.方案写多了,套话就多了起来.一个方案套一个方案的写,所以也不觉得方案怎么难写.毕竟为 ...
php 前端超出字数,标题字数超出范围截断处理方案比较
美好且让人蛋疼的一天开始了-- 生活中处处充满了意外:迈着欢快的步伐突然踩到了狗shit.洗衣服时发现自己不知何时放进口袋的毛爷爷.在女神面前欢快的聊天的时候没憋住放了一个屁等等.有些意外让人惊喜,有 ...
媒介方案及其实施如何体现其策略性和创意性、科学性和艺术性结合？字数不限...
媒介方案的成功与否很大程度上取决于它的策略性.创意性.科学性和艺术性的结合.首先,策略性指的是方案是否符合企业的目标和需求,是否有效地利用了市场资源和优势.其次,创意性指的是方案是否具有独特性.吸引力 ...
新网杯top1方案：手把手构建中文语音合成模型！
基于Parakeet的中文语音合成方案方案地址: https://aistudio.baidu.com/aistudio/projectdetail/2792887 1 第一步安装Parakeet ...
Android微信智能心跳方案 Android微信智能心跳方案
前言:在13年11月中旬时,因为基础组件组人手紧张,Leo安排我和春哥去广州轮岗支援.刚到广州的时候,Ray让我和春哥对Line和WhatsApp的心跳机制进行分析.我和春哥抓包测试了差不多两个多礼拜 ...
Android微信智能心跳方案
前言:在13年11月中旬时,因为基础组件组人手紧张,Leo安排我和春哥去广州轮岗支援.刚到广州的时候,Ray让我和春哥对Line和WhatsApp的心跳机制进行分析.我和春哥抓包测试了差不多两个多礼拜 ...
网络推广方案中解析SEO优化文章的标题设置技巧
在网站优化中,网络推广方案内容优化一直是优化人员作业的重中之重,对于这种需要长期具备耐心和创新力的内容优化工作也让优化人员更加难.文章内容中,标题对网站的权重和关键词排名提升也有着积极地作用,那么对于 ...

ReactQuill字数限制方案

1. 使用deleteText

2. 监听键盘按下的事件onKeyDown

ReactQuill字数限制方案相关推荐

最新文章

热门文章