uniapp文本框长度

uniapp文本框长度限制方法

在uniapp中限制文本框长度可以通过多种方式实现，包括原生组件属性、自定义校验和第三方插件。

原生input/textarea组件maxlength属性

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

动态监听输入变化

methods: {
  handleInput(e) {
    if(e.detail.value.length > 20) {
      uni.showToast({
        title: '超出最大长度限制',
        icon: 'none'
      })
      return false
    }
  }
}

使用uniapp表单校验规则

rules: {
  content: {
    rules: [{
      checkFunction: function(rule, value, data, callback) {
        if (value.length > 50) {
          callback('内容不能超过50字')
        }
        callback()
      }
    }]
  }
}

字符计算注意事项

中英文字符计算差异需要考虑：

function getRealLength(str) {
  let len = 0
  for (let i = 0; i < str.length; i++) {
    str.charCodeAt(i) > 255 ? len += 2 : len++
  }
  return len
}

第三方插件推荐

• uview-ui的u-input组件
• uni-forms表单验证组件
• tm-input组件库

实际开发中建议结合maxlength属性和实时校验，既能防止用户超额输入，又能提供友好提示。移动端还需注意不同键盘类型可能带来的字符计算差异。