textarea下长度区别字母数字字符、中文字符换行 maxlength兼容

最新推荐文章于 2021-05-18 11:07:12 发布

weixin_34220623

最新推荐文章于 2021-05-18 11:07:12 发布

阅读量1.3k

点赞数 1

文章标签： javascript 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000012787805

版权

本文介绍了在Vue项目中，textarea输入字符计数时如何处理中文、字母、数字、空格和换行符的问题。针对textarea的maxlength属性不区分中文和英文字符长度，以及换行符被计入字符数的缺陷，提出了按照中文2个占位，字母数字空格各1个占位，换行符不占位的计算方式。同时，建议使用oninput事件监听输入，确保复制粘贴等操作也能正确计算剩余字符数。

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

在Vue 上 textarea 根据字母数字中文换行符号显示剩余长度

第一次写博客，主要是想把自己平时开发过程中遇到的问题记录下来，做个积累，也给各位前端小伙伴一些知识分享，平时公司工作比较忙，忽略了提升自己，通过博客可以做知识沉淀，如果对其中有不同意见的，欢迎提出
问题出现
公司很多的 h5 和小程序场景都是在 textarea 输入文字，然后显示已输入xxx 个字符这样的图片描述

这时候常规做法在textarea 设置 maxlength = '5000' ,基于vue 的话,那就绑定一个值 textareaVal 在页面输出 { { textareaVal.length/5000 }}

不过如果这样就完成，写这篇博文就没意义了，好了，废话不多说

这样写的问题有一下几个：
-- 假设最多输入40个字符，中文能输入48个，字母输入48个，但是字母的占位只有中文的一半，显然产品和用户不会买账，他们会让你把字母也要根中文输入的一样多，占位一样
-- 换行，用户手动去点换行，会占一个字符，默认 textareaVal.length 会把换行符号当作一个字符，maxlength 也是

要解决这两个问题，我们要按这个思路走
中文 2个占位
字母一个占位
数字一