【微信小程序+Taro 3+NutUI 3】input （nut-input） 、 textarea （nut-texteare）类型使用避坑

前言

input组件在开发中会经常用到，但是微信小程序中遇到了一些问题，要是有大神有更好的解决办法，请评论教教我！！！！！！

一、光标问题

1.问题描述

在微信小程序中使用input，就是有各种各样的问题，我最经常遇到的就是：

• 输入时，光标位置不对。一般表现往前跳，没有聚焦在文字后面，导致输入的东西不符合预期，用户体验感差。
• 聚焦时，光标位置不对。一般表现为要么在最前面，要么在中间，长文本光标位置都是乱的。
  这些问题在微信开发者社区能大把搜到：
  
  
  官方可能改不过来了，那么我们自己手动解决一下吧。

2.解决方案

使用cursor属性

• 方案一： 写方法，申明一个变量，取用cursor属性。代码如下：

<template>
  <view class="demo-page">
    <input :value="searchText" type="text" placeholder="请输入" 
    @input="handleInput" class="search-input" :cursor="cursor"/>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
const searchText = ref('')
const cursor = ref(0)
const handleInput = (event: any) => {
  cursor.value = event.detail.cursor
}
</script>

微信开发者文档： 表单组件 /input

• 方案二：直接用v-model绑定的属性的长度。这里用searchText举例子，代码如下：

<template>
  <view class="demo-page">
    <input :value="searchText" type="text" placeholder="请输入" 
    @input="handleInput" class="search-input" :cursor="searchText.length"/>
  </view>
</template>

二、Taro 的 textarea样式（字体、placeholder样式）

如果需要基于<textarea></textarea>绘制页面元素，字体样式、line-height等肯定不满足需求，就需要自定义。

• 原生的textarea属性，如下图：
  

微信开发者文档：表单组件 /textarea

• Taro3的textarea属性，如下图：
  

Taro3 文档： 表单组件 Textarea

这里我使用的是Taro3 的 <textarea></textarea>

就按照UI设计稿绘制即可，这里个举例，具体需求如下：

• 输入框的高度为90rpx，宽度100%；
• 输入框的内边距为10rpx；
• 输入框的边框线为2rpx的直线黑色；
• 输入框最多能输入90个字；
• 输入框的字体大小（包括placeholder）为28rpx；
• 输入框的字体行高为40rpx；

一些宝宝同学可能会问，为什么要管placeholder的样式？

这里回复：因为是需求呀！UI设计如此，前端就是要求还原度高。

没有修改placeholder的样式前，光标是取的输入框line-height的高度，所以可以很明显的看出光标和placeholder文字垂直方向未对齐。如下图：

方法1. 原生 textarea的 placeholder-style 属性

代码如下：

<template>
  <view class="demo-page">
    <textarea 
      v-model="searchText"
      maxlength="50"
     placeholder-style="color: #523b3b; font-size: 30rpx; line-height: 40rpx"
      placeholder="请输入" 
    ></textarea>
  </view>
</template>

<style lang="scss">
.demo-page {
  padding: 10px;
  border: 1px solid #000;

  .h5-textarea {
    width: 100%;
    height: 90rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #523b3b;
  }
}
</style>

方法2. Taro 3的 textarea的 placeholder-class 属性

<template>
  <view class="demo-page">
    <textarea 
      v-model="searchText"
      maxlength="90"
      placeholder-class="input-placeholder"
      placeholder="请输入" 
    ></textarea>
    <view class="limit">{{ searchText.length }}/90</view>
  </view>
</template>

<style lang="scss">
.demo-page {
  padding: 10px;
  border: 1px solid #000;

  .h5-textarea {
    width: 100%;
    height: 90rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #523b3b;
  }

  .input-placeholder {
    color: #523b3b;
    font-size: 30rpx;
    line-height: 40rpx;
  }

  .limit {
    width: 100%;
    text-align: right;
    font-size: 28rpx;
    color: #523b3b;
  }
}
</style>

至此样式改好了，但是呢，会被细心的UI发现问题，引入问题三。

三、IOS的样式和安卓、PC端的小程序样式不一样

1.问题描述

都为第一行的时候，IOS渲染出来的顶部会比安卓、PC端的更高。

• IOS的样式：
  
• 安卓、PC端的样式：
  
  将文字区域滚动一下，会发现IOS和安卓、PC端渲染出来是一毛一样的。如图：
  

在微信开发者工具上看，是没什么问题的。到真机调试到时候，就会发现这个问题了。

2. 解决问题

真机调试的时候，检查了标签的所有样式，都没什么问题，但就是凭空多了一个高度。这个时候，要回过去看一下，微信小程序的组件当中是否有什么属性控制了这两种机型，展示的样式不一样。（就类似于uniapp中popup组件，有一个特定属性是控制IOS端有个安全底部的属性）

仔细阅读文档，就会发现textarea有个属性是 disable-default-padding：是否去掉IOS下的默认内边距

当然要看一下 Taro 3是否支持这个属性，答案是支持的。

代码如下：

<template>
  <view class="demo-page">
    <textarea 
      v-model="searchText"
      maxlength="90"
      placeholder-class="input-placeholder"
      :disableDefaultPadding="true"
      placeholder="请输入" 
    ></textarea>
    <view class="limit">{{ searchText.length }}/90</view>
  </view>
</template>

加上之后去IOS端验证一下，如图：

四、NutUI的textarea组件

想实现富文本框的方式有很多种，具体需求 还是：

• 输入框的高度为90rpx，宽度100%；
• 输入框的内边距为10rpx；
• 输入框的边框线为2rpx的直线黑色；
• 输入框最多能输入90个字；
• 输入框的字体大小（包括placeholder）为28rpx；
• 输入框的字体行高为40rpx；

1. 微信原生小程序（直接基于 textarea 组件）

<!-- page.wxml -->
<view class="input-wrapper">
  <!-- textarea 实现多行输入，input仅单行，不满足富文本输入基础需求 -->
  <textarea 
    class="custom-textarea"
    maxlength="90"  <!-- 限制最多90字 -->
    placeholder="请输入内容"
    <!-- 配置placeholder的字体/行高样式 -->
    placeholder-style="font-size:28rpx; line-height:40rpx; color:#999;"
  ></textarea>
</view>

.custom-textarea {
  width: 100%;
  height: 90rpx;
  padding: 10rpx;
  box-sizing: border-box; /* 内边距不撑开宽高 */
  border: 2rpx solid #000; /* 2rpx黑色直线边框 */
  font-size: 28rpx;
  line-height: 40rpx;
  /* 可选：去除默认样式，避免干扰 */
  outline: none;
  resize: none; /* 禁止手动调整高度 */
}

关键说明

微信原生textarea直接支持maxlength属性限制字数，无需额外逻辑；
box-sizing: border-box必须加，否则内边距会让输入框高度超过 90rpx；
placeholder-style单独配置占位符的字体 / 行高，与输入内容样式统一。

2. Taro

其实就可以前面第三点的样式什么来书写就好

<template>
  <view class="demo-page">
    <textarea 
      v-model="searchText"
      maxlength="90"
      placeholder-class="input-placeholder"
      :disableDefaultPadding="true"
      placeholder="请输入" 
    ></textarea>
    <view class="limit">{{ searchText.length }}/90</view>
  </view>
</template>

<style lang="scss">
.demo-page {
  padding: 10px;
  border: 1px solid #000;

  .h5-textarea {
    width: 100%;
    height: 90rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #523b3b;
  }

  .input-placeholder {
    color: #523b3b;
    font-size: 30rpx;
    line-height: 40rpx;
  }

  .limit {
    width: 100%;
    text-align: right;
    font-size: 28rpx;
    color: #523b3b;
  }
}
</style>

3.NutUI3（Vue3 + 小程序）

NutUI 3 : Input 输入框

<!-- page.vue -->
<template>
  <nut-input
    v-model="state.textarea"
    label="文本"
    type="textarea"
    show-word-limit
    rows="2"
    max-length="90"
    placeholder="请输入留言"
  />
</template>

<script setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<style scoped lang="scss">
// NutUI组件有默认样式，需用样式穿透覆盖
.custom-nut-input :deep(.nut-input-textarea) {
  width: 100%;
  height: 90rpx !important; // 覆盖组件默认高度
  padding: 10rpx;
  box-sizing: border-box;
  border: 2rpx solid #000 !important; // 覆盖组件默认边框
  font-size: 28rpx !important;
  line-height: 40rpx !important;
  resize: none;
  outline: none;
}
</style>

NutUI： TextArea 文本域

或者直接用<nut-textarea></nut-textarea>组件，样式代码自己调整哦，不能通过placeholder那两个属性去调整placeholder的字体样式了。

<template>
  <nut-textarea v-model="value" limit-show max-length="90" />
</template>

注意一点，当Nutui版本使用的是version 4时，nut-input是不支持 type=textarea的。