小程序input设置maxlength，输入中文被限制的bug

问题描述

代码如下：

<input type="text" name="name" maxlength="10" />

经测试发现：小程序中input框设置了maxlength时，主要是在IOS端，在输入中文汉字时，拼音被算在了input的数里，导致无法正常输入内容。

解决方案

目前官方还没有解决该bug，如果必须要限制input输入内容的长度，则不能直接使用maxlength属性，下面简单总结几种实现方案，供大家参考。

1、uniapp使用watch监听属性值变化：

监听input值的变化，没次变化就判断它的长度，超过则进行截取。

<input type="text" name="name" v-model="name"  placeholder="请输入内容"/>

watch: {
  'name': {
    handler(val) {
      let maxLen=10
      if (val.length > maxLen) {
        setTimeout(() => {
           this.name = this.name.substr(0, maxLen)
        }, 0)
      }
    },
  },
},

2、原生通过绑定事件校验字数：

给 input 绑定 change 事件或者 blur事件，然后 js 里面去处理。比如：

<input type="text" :valu="name" bindinput="inputChange" />

inputChange(e) {
	let maxLen = 10
	let text = e.detail.value.trim()
	this.setData({
		name:text.length>maxLen ?text.substring(0,maxLen) : text
	})
},

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_12524