当前位置：首页 > uni-app

uniapp文本框长度

2026-02-06 18:08:20uni-app

控制文本框长度的方法

在UniApp中控制文本框长度可以通过多种方式实现，包括设置最大输入长度、动态计算字符数以及结合样式限制显示宽度。

设置maxlength属性 在<input>或<textarea>组件中直接使用maxlength属性限制最大字符数：

<input type="text" maxlength="10" placeholder="最多输入10个字符" />

动态显示剩余字数 结合@input事件实时计算剩余可输入字符数：

uniapp文本框长度

<template>
  <textarea 
    v-model="inputText" 
    maxlength="100" 
    @input="updateCount"
    placeholder="请输入内容"
  />
  <text>剩余字数：{{ remainingCount }}</text>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      maxLength: 100,
      remainingCount: 100
    }
  },
  methods: {
    updateCount() {
      this.remainingCount = this.maxLength - this.inputText.length
    }
  }
}
</script>

CSS限制可视区域 通过CSS的width和overflow属性控制文本框显示宽度：

.limited-input {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

输入验证处理

在提交表单时进行二次验证，确保输入长度符合要求：

uniapp文本框长度

methods: {
  submitForm() {
    if (this.inputText.length > this.maxLength) {
      uni.showToast({
        title: '输入内容超出限制',
        icon: 'none'
      })
      return false
    }
    // 正常提交逻辑
  }
}

平台差异说明

微信小程序：maxlength对emoji字符计算可能不准确，需要额外处理
H5端：可通过CSS的max-width和min-width实现响应式限制
App端：建议使用原生NVUE组件获得更好的性能表现

扩展功能实现

自定义计数规则 处理中英文字符差异（中文算2个字符）：

function getRealLength(str) {
  return str.replace(/[\u4e00-\u9fa5]/g,'aa').length
}

粘贴内容截断 拦截粘贴事件并自动截断超长内容：

<textarea 
  @paste="handlePaste"
  maxlength="200"
/>

methods: {
  handlePaste(e) {
    const clipboardData = e.clipboardData || window.clipboardData
    const pastedText = clipboardData.getData('text')
    if (pastedText.length > 50) {
      this.inputText = pastedText.substring(0, 50)
      e.preventDefault()
    }
  }
}