uni-app textarea组件设置font-size后linechange事件异常

在 uni-app 中使用 textarea 组件时，如果你设置了 font-size 样式，可能会导致 linechange 事件的行为异常。这是因为 textarea 的行高和字体大小会影响换行逻辑，而 linechange 事件是基于文本的行数变化触发的。

可能的原因

1. 字体大小影响行高：当你设置了 font-size 时，行高可能会发生变化，导致 textarea 的换行逻辑与预期不一致。
2. 浏览器或平台的差异：不同的平台（如 iOS、Android）或浏览器对 textarea 的行高和换行处理方式可能不同，这可能导致 linechange 事件的行为不一致。

解决方案

1. 手动计算行高：你可以通过设置 line-height 来确保行高与字体大小匹配，从而避免换行逻辑异常。

   textarea {
       font-size: 16px;
       line-height: 1.5; /* 根据你的需求调整 */
   }
   

2. 使用 input 事件替代 linechange：如果 linechange 事件的行为不符合预期，你可以尝试使用 input 事件来监听文本内容的变化，然后手动计算行数。

   <textarea [@input](/user/input)="handleInput"></textarea>
   

   methods: {
       handleInput(event) {
           const text = event.detail.value;
           const lines = text.split('\n').length;
           console.log('当前行数:', lines);
       }
   }
   

3. 使用 scrollHeight 计算行数：你可以通过 scrollHeight 属性来动态计算 textarea 的行数。

   methods: {
       handleInput(event) {
           const textarea = event.target;
           const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight, 10);
           const lines = Math.round(textarea.scrollHeight / lineHeight);
           console.log('当前行数:', lines);
       }
   }