在前端开发中，我们经常会使用 textarea 标签来让用户输入文本。而在一些情况下，我们需要对用户输入的文本长度做限制。这时，我们可以通过设置 textarea 的 maxlength 属性来实现。
然而，在使用 Chrome 浏览器时，我们可能会遇到一个问题：当用户输入的文本超出了 maxlength 的限制时，Chrome 统计的字符数会比实际多出一个字节。这个问题在一些场景下可能会导致严重的后果，因此我们需要学习如何避免它。
问题描述
在 Chrome 浏览器中，当一个 textarea 元素设有 maxlength 属性时，用户在其中输入文本时会被限制在指定的长度范围内。如果用户输入的文本长度超过了 maxlength 属性的值，textarea 元素就会阻止用户继续输入。
同时，Chrome 还会在 textarea 右下角展示一个类似于“5/4”这样的计数器，表示用户已经输入的字符数和总字符数。这个计数器的行为是按照 Unicode 字符计算字符数的，而不是按照字节计算。
然而，当用户输入的文本包含一些 Unicode 字符（如表情符号）时，Chrome 计算的字符数就会出现错误。具体来说，Chrome 会将每个 Unicode 字符当作两个字符来计算，导致计数器的数值比实际多出一个。
下面是一个示例代码，用于演示这个问题：
--------- ----- ------ ------ ----- ---------------- ------------- ------------------- ------- ------ --------- ------------------------- ------- -------
当我们在这个页面中输入一个表情符号（如😄）时，Chrome 的计数器会显示“2/4”，即已经输入了两个字符。但实际上，这个表情符号只占用了一个 Unicode 字符，因此正确的计数应该是“1/4”。
解决办法
为了避免这个问题，我们需要对 textarea 中输入的文本进行特殊处理。具体来说，我们可以使用 JavaScript 中的 String 表示法来计算字符串的长度。
在这种表示法中，每个 Unicode 字符都被看作一个字符，因此不会像 Chrome 那样将其当作两个字符来计算。下面是一段示例代码，展示了如何使用 String 表示法来计算字符串的长度：
-------- --------------------- - ------ ------------------------------------- - -- - ----- -------- - ----------------------------------- ---------------------------------- -- -- - ----- ---- - --------------- ----- ------ - ---------------------- -------------------- ---
在这段代码中，我们首先定义了一个名为 countCharacters 的函数，用于计算一个字符串的长度。这个函数的实现方式是将字符串使用 encodeURI 函数编码，然后按照“%..”或者单个字符来分割，最后统计分割得到的数组的长度。
在 textarea 的 input 事件中，我们调用了这个函数来计算用户输入的文本长度，并将结果输出到控制台中。
总结
在使用 Chrome 浏览器时，带有 maxlength 属性的 textarea 元素可能会出现字符计数错误的问题。为了避免这个问题，我们可以使用 String 表示法来计算字符串的长度，而不是依赖浏览器自带的计数器。这个解决办法可以确保在各种浏览器和操作系统下都能正确地计算字符数，从而提高应用程序的稳定性和可靠
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26194