【快应用】如何限制input组件的输入值个数

时间:2022-11-29 16:56:11

问题背景:

快应用中如何实现控制input输入,超过规定字数就弹窗提示且无法输入超过规定的字数?

实现方案:

可通过this.$watch()监测input组件的输入值和@change事件,当输入值超过限定字数给出弹窗提示,并强制将输入的值改为限定字数内。

实现代码:

<template>

<div class="container">

<text>仅支持输入5个值</text>

<input class="input-text" 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​

【快应用】如何限制input组件的输入值个数