小程序textarea不是你想的那样

很多开发者刚开始接触textarea的时候，就会被它各种奇葩的行为整得痛苦不堪，因此，作为一名经验丰富的开发者，本篇就来系统的介绍一下小程序textarea的那些令人摸不着头脑的操作和坑。

maxlength

使用过textarea的人都知道，它有一个非常常用的属性叫maxlength，作用是限制文本框的输入字符数。

那么，问题来了，maxlength到底是限制了字符数还是字节数呢？

答案是：字节数。

举个例子，假如maxlength设为10，那么你可以输入10个英文单词，也可以输入10个汉字，但如果你输入10个Emoji表情，却会发现超出了限制。

这是因为一个Emoji表情的字节数是4个，而一个英文单词或汉字的字节数是1个。

除此之外，maxlength还有一个坑，就是当输入的内容超过了限制时，浏览器会自动截断输入内容，但不会触发任何事件，这可能会导致一些意外的错误。

超出换行

当输入的内容超过了文本框的宽度时，浏览器会自动换行。

但是，在小程序中，textarea的换行行为却不是那么简单。

如果你在textarea中输入一段很长的文本，然后选中其中一部分，你会发现，选中的部分不会换行。

这是因为小程序的textarea默认是不允许换行的，只有当文本框的宽度不够时，它才会自动换行。

如果你想让textarea始终换行，可以给它加上line-break属性。

<textarea line-break></textarea>

样式

小程序textarea的样式也是非常有限的。

除了常见的font-size、color、background-color等属性外，你几乎不能给它添加任何其他的样式。

这是因为小程序的textarea是基于原生组件实现的，而原生组件的样式是非常有限的。

如果你想给textarea添加更多的样式，可以考虑使用第三方组件库。

粘贴

在小程序中，textarea是不支持粘贴操作的。

如果你尝试粘贴文本到textarea中，你会发现什么都不会发生。

这是因为小程序的textarea默认是禁用了粘贴操作的。

如果你想启用粘贴操作，可以给它加上enable-paste属性。

<textarea enable-paste></textarea>

回车

在小程序中，textarea的回车行为也是非常特别的。

如果你在textarea中按回车键，你会发现，光标会移动到下一行，但不会换行。

这是因为小程序的textarea默认是不支持回车换行的。

如果你想让textarea支持回车换行，可以给它加上enter-return属性。

<textarea enter-return></textarea>

各种各样的限制

小程序textarea还有各种各样的限制，比如：

• 不支持多行文本的选择。
• 不支持文本的复制和剪切。
• 不支持撤销和重做操作。
• 不支持拖拽操作。

这些限制都是小程序textarea的原生限制，我们无法通过代码来修改它们。

总结

小程序textarea是一个非常特殊的组件，它有很多奇葩的行为和坑。

如果你想使用小程序textarea，一定要先了解它的这些特性，以免在开发中遇到各种各样的问题。