uni-app textarea 右下角显示字数限制

在uni-app中，可以通过设置textarea的maxlength属性和data-maxnum属性来实现右下角显示字数限制。同时，可以使用:value和@input来绑定textarea的值和输入事件。

以下是一个示例代码：

<template>
  <textarea class="JTxtArea lg" :maxlength="88" :data-maxnum="reason.length+'/88'" auto-height @input="inputReason" :value="reason"></textarea>
</template>

<script>
export default {
  data() {
    return {
      reason: ''
    }
  },
  methods: {
    inputReason(e) {
      this.reason = e.detail.value;
    }
  }
}
</script>

在上述代码中，通过设置maxlength属性为88来限制textarea的最大输入字符数。同时，通过:data-maxnum属性将当前输入字符数和总字符数显示在右下角。使用@input绑定inputReason方法来监听输入事件，将输入的值赋给reason变量。

相关问题

uni-app textarea显示文本框

uni-app中可以使用textarea标签来显示文本框，示例代码如下：

<template>
  <view class="textarea-group">
    <h4>textarea演示</h4>
    <textarea v-model="value" placeholder="这是一段关于textarea的测试默认文字"></textarea>
  </view>
  {{ value }}
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

在上述代码中，我们使用了textarea标签来创建一个文本框，并使用v-model指令将文本框的值与data中的value属性进行双向绑定。这样，当用户在文本框中输入内容时，value属性的值也会随之改变。后，我们在模板中使用{{ value }}来显示文本框的值。

uni-app textarea 无法获取焦点

在 `uni-app` 中，`textarea` 组件默认是不能获取焦点的，需要设置 `focus` 属性为 `true` 才能使其获取焦点。

示例代码如下：

<template>
  <view>
    <textarea :focus="isFocus" placeholder="请输入内容" @focus="handleFocus"></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFocus: false
    }
  },
  methods: {
    handleFocus() {
      this.isFocus = true
    }
  }
}
</script>

在 `textarea` 组件中设置 `:focus="isFocus"`，当 `isFocus` 为 `true` 时，`textarea` 组件会自动获取焦点。同时，在 `@focus` 事件中，我们可以设置 `isFocus` 为 `true`，从而触发 `textarea` 组件获取焦点。

需要注意的是，`textarea` 组件在 `scroll-view` 中无法获取焦点，需要将其放在 `view` 中使用。