问题描述

代码如下：

<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://fly63.com/article/detial/12524