问题背景：
快应用中如何实现控制input输入，超过规定字数就弹窗提示且无法输入超过规定的字数？
实现方案：
可通过this.$watch()监测input组件的输入值和@change事件，当输入值超过限定字数给出弹窗提示，并强制将输入的值改为限定字数内。
实现代码：
<template>
<div class="container">
<text>仅支持输入5个值</text>
<input class="input-text" id="text1" value="{{content}}" @change="handleInputValueChanged"></input>
</div>
</template>
<style>
.container {
flex: 1;
flex-direction: column;
align-items: center;
}
.input-text {
height: 100px;
width: 85%;
border: 1px solid #000000;
font-size: 80px;
}
</style>
<script>
import prompt from '@system.prompt';
module.exports = {
data: {
content: '',
inputText: '',
},
onInit() {
this.$page.setTitleBar({ text: '' })
},
test(e) {
this.$watch('this.content', 'handleInputValueChanged')
},
handleInputValueChanged: function (e) {
this.content = e.value;
console.log('handleInputValueChanged:' + this.content);
if (this.content.length === 5) {
console.log('value length greater than 5');
prompt.showToast({
message: "消息最长为5",
gravity: 'center'
})
this.inputText = this.content
}
if (this.content.length > 5) {
this.content = this.inputText
}
},
}
</script>
欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
标签：handleInputValueChanged,个数,content,inputText,length,组件,input,输入 From： https://www.cnblogs.com/developer-huawei/p/16935068.html